[SOLVED] Webpack: emitted chunks do not create a main entrypoint

Webpack: emitted chunks do not create a main entrypoint

I upgraded webpack from version 2 to version 4. My config includes:

entry = {
    Main: './main',
    App: './app'
};

and

var output = {
    path: path.join(__dirname, outPath, '_js'),
    publicPath: '/_js/',
    filename: '[name]-bundle.js'
};

In version 2, my output was simply App-bundle.js and Main-bundle.js, but in webpack@4 the output is

Entrypoints:
  Main (414 KiB)
      Main~493df0b3-bundle.js
      Main~4c0201b9-bundle.js
  App (316 KiB)
      App~47dad47d-bundle.js
      App~6bd0612f-bundle.js
      App~01e7b97c-bundle.js

without a central, non-hashed file name to import.

EDIT:

My optimization object looks like this:

optimization: {
    splitChunks: {
        chunks: 'async',
        minSize: 20000,
        maxSize: env === 'production' ? 1000000 : 0,
        minChunks: 1,
        maxAsyncRequests: 6,
        maxInitialRequests: 4,
        automaticNameDelimiter: '~',
        cacheGroups: {
          default: {
            minChunks: 1,
            priority: -20,
            reuseExistingChunk: true
          }
        }
    },
    minimize: env === 'production' ? true : false
},

--- QUESTION ---

I'm ok having chunks, but how do I configure webpack 4 in order to have a central entry file called simply Main-bundle.js and App-bundle.js that I can easily import in my HTML templates?

Solution

Please delete minSize and maxSize in your splitChunks configurations. Or alternatively, lower the minSize and uprise maxSize.

minSize and maxSize are quite handy when you want to fine-tune your chunks for performance, or other reasons that consider chunk size.

Personally I found out that having 600KB size chunks for 10 chunks that are downloaded as 'inital chunks' are the best fine-tune performance in my application. I couldn't reach the same perf results without it, as webpack created an uneven and big chunks for some of my entry points.