Webpack leaves JS in cache file when compiling multiple JS libraries

Question

I'm trying to configure Webpack so that it compiles multiple JS files. But when I do this the majority of JS is left in a cache file, the contents of which isn't included in my files.

Generated files:

js
-- theme--01.js (134kb)
-- theme--02.js (134kb)
-- theme--03.js (134kb)
-- theme--04.js (134kb)
-- themevendors-lib_common_scripts_global_libraries_js-lib_common_scripts_global_smoothscroll_min_js--8bace3.js (753kb)

When I generate one file it works correctly:

js
-- theme--01.js (879kb)

How my entry points are configured:

entry: {
        "--01": path.resolve(process.cwd(), 'src', 'theme--01.ts'),
        "--02": path.resolve(process.cwd(), 'src', 'theme--02.ts'),
        "--03": path.resolve(process.cwd(), 'src', 'theme--03.ts'),
        "--04": path.resolve(process.cwd(), 'src', 'theme--04.ts'),
    },

Here's my complete Webpack config on JSfiddle as StackOverflow won't let me paste the whole thing here: https://jsfiddle.net/charlievaughan/rpeztbLj/

I need to generate multiple files from the same codebase for different locales and to optimise page-load speeds / Lighthouse scores.

Using Webpack v5.62.1

Answer 1

I fixed this issue by removing the following from my Webpack config:

splitChunks: {
  chunks: 'all'
}