Webpack: emitted chunks do not create a main entrypoint

Question

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?

It looks like you have cache groups enabled, are you using splitChunks? — Raz Ronen, Aug 06 '20 at 18:04
Did you configure `optimization` configuration in webpack configuruation? maybe `moduleIds: hashed`? Can you post your whole webpack config please? — Raz Ronen, Aug 06 '20 at 18:05
try adding `.js` suffix for your entry points: ```entry = { Main: './main.js', App: './app.js' };``` — Raz Ronen, Aug 06 '20 at 18:08
@RazRonen yes, I am using SplitChunks. But the version 2 also had `CommonsChunkPlugin`. — Emanuele Ciriachi, Aug 06 '20 at 18:56
I made my entry points `./main.js` etc. No change in the output sadly. — Emanuele Ciriachi, Aug 06 '20 at 18:59
Theres no question that this issue comes from splitChunks configurations. — Raz Ronen, Aug 06 '20 at 19:03
Try deleting min max size to see if this is the issue please — Raz Ronen, Aug 06 '20 at 19:06
Deleting min/max size seems to have done the trick. Which leads me to a question - what is the point of having this option? How could I have used the files in the "chunked" format? BTW feel free to post your comment as an answer. — Emanuele Ciriachi, Aug 06 '20 at 19:48

score 1 · Accepted Answer · answered Aug 06 '20 at 20:02

1

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.

answered Aug 06 '20 at 20:02

Raz Ronen

2,418
2
14
26

Somehow, deleting `minSize` and `maxSize` ensured that a single file is created, thus solving my problem. While I would have liked to find a way to use the chunked version of the resulting file, this answer ultimately solves my problem. – Emanuele Ciriachi Aug 06 '20 at 20:13
Usually filename configuration are configured by `output: { filename: '[name].[contenthash].js', },` which signs the chunk with the contenthash. Still just one output file like you want, but with a hash. This will save you problems in the future when you release a new version of your assets. Otherwise users will still get the old one from their cache. – Raz Ronen Aug 06 '20 at 20:18
So what should I have done? Manually included all the chunks in my HTML template? – Emanuele Ciriachi Aug 06 '20 at 20:34
You can use [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/) to do that for you – Raz Ronen Aug 06 '20 at 20:35

Webpack: emitted chunks do not create a main entrypoint

1 Answers1