Webpack 5 {output: chunkFilename} not working

Question

Currently I am migrating some boilerplate code from Webpack v4 to v5 and I am stuck with the produced output.

In my webpack config, I use single-file entry & the splitChunks option to separate the game code from the libraries I am using.

optimization: {
        splitChunks: {
            chunks: "all",
        },
}

output -

output: {
            path: path.resolve(__dirname, "dist"),
            filename: "game.[contenthash].js",
            chunkFilename: "game-libraries.[contenthash].js",
},

So when I run the build I get the files split, but they both go with the filename structure.

ex produced build -

game.4c49dce85aa02822c28d.js

game.f4e81e5394bdc5feaa3b.js

And I feel like the chunkFilename option is being ignored.

What am i missing?

same thing happens if you define `chunkFilename` as a method? `chunkFilename: () => return "game-libraries.[contenthash].js"` — Raz Ronen, Feb 13 '21 at 19:42
It seems that you are misunderstanding the `chunkFilename` option. So the filename is used for generating independent entry bundles, while `chunkFilename` is used for bundles that are auto-generated by Webpack during code splitting. would be better if you provide the Entry related details. — Anita, Feb 15 '21 at 06:51
@Anita it's a [single entry point](https://github.com/jkanchelov/pixi-typescript-boilerplate/blob/webpack-v5/webpack.config.ts) - `entry: "./src/index.ts",` . My point exactly is to have a name like vendors.js with all the code splitted modules from Webpack. — Yordan Kanchelov, Feb 15 '21 at 13:55

score 2 · Answer 1 · answered Feb 16 '21 at 03:59

2

It seem to be a chunk created by the default splitChunks configuration. Both entries share common modules. This is not affect by chunkFilename, but by filename

Reference: https://github.com/webpack/webpack/issues/9297 ..may be you are facing this issue ...filename is used for chunking filename

answered Feb 16 '21 at 03:59

shalini

1,291
11
13

what would be the reason for it to work correctly with Webpack 4 ( which is in the develop branch ) ? – Yordan Kanchelov Feb 17 '21 at 11:41

score 1 · Answer 2 · answered Apr 22 '21 at 13:11

It seems that for webpack 5, chunkFileName is only used for code splitting. To control the vendor chunk filename, change output.filename to a function. Here is how I did it.

{
    output: {
        filename: pathData => {
            let name = pathData.chunk.name;
            //name will be undefined for vendors
            if (name === undefined) {
                name = pathData.chunk.id;
                //id is very long by default, I chose to shorten it
                if (name.includes('vendors-')) {
                    name = 'vendors';
                }
            }
            return `${name}.js`;
        }
}

score 0 · Answer 3 · answered Jan 27 '22 at 13:28

You are trying to have a custom name for you vendor libraries output file. Try adding this (webpack v5)

ENTRY: "game" keyword becomes [name] value in output. I suggest you to use "main" instead. Anyway, in your case:

entry: {
    game: "./src/index.js",
  },

OPTIMIZATION:

optimization: {
        chunkIds: "named",
        splitChunks: {
            chunks: "all",
            name: "vendors"
        },
},

OUTPUT

output: {
            path: path.resolve(__dirname, "dist"),
            filename: "[name].[contenthash].js",
            chunkFilename: "[name].[contenthash].js",
},

It should work. I had the same issue before.

score -1 · Answer 4 · answered Oct 03 '21 at 04:26

-1

new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }),

add in plugin

answered Oct 03 '21 at 04:26

Danilo Rodrigues

1

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 03 '21 at 05:24

Webpack 5 {output: chunkFilename} not working

4 Answers4