Webpack 5 {output: chunkFilename} not working

user_5227945 0
Viewed 4914

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?

webpack bundler output configuration
4 Answers

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

user_27462700

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`;
        }
}
user_33200570

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.

user_30182100

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

add in plugin

user_170618830
Related