Webpack，优化分块给出“冲突：多个块将资产发送到相同的文件名”错误

Question

Info

I am trying to generate my own webpack config and have some problems getting it working.

Problem

When trying to use optimization to split files into chunks I get the a error like underneath

Error: Conflict: Multiple chunks emit assets to the same filename static/js/bundle.js (chunks main and vendors-node_modules_react-hot-loader_patch_js-node_modules_react_jsx-dev-runtime_js-node_mod-4610d2)

If I remove the optimization section it works but without chunking. I have looked to the create react app webpack.config.js to get something to reference while generating this.

As you can see they have the optimization section working with chunking in both development and production. Why do I get the conflict error when using it?

Code

Minified/simplified version of my config (runtimeChunk disabled, as it also gives the same conflict error)

webpack.config.js

module.exports = () => {
    process.env.NODE_ENV = "development";
    process.env.BABEL_ENV = "development";

    return {
        mode: "development",
        entry: ["react-hot-loader/patch", "./src"],
        output: {
            path: undefined,
            publicPath: "/",
            filename: "static/js/bundle.js",
            chunkFilename: "static/js/[name].chunk.js",
        },
        optimization: {
            minimize: false,
            splitChunks: {
                chunks: "all",
                name: false
            },
            // runtimeChunk: {
            //     name: (entrypoint) => `runtime-${entrypoint.name}`,
            // },
        },
        resolve: {
            modules: [path.join(__dirname, "src"), "node_modules"],
            alias: {
                "react-dom": "@hot-loader/react-dom",
            },
        },
        module: {
            rules: [
                {
                    test: /\.(js|mjs|jsx|ts|tsx)$/,
                    include: path.resolve(__dirname, "./src"),
                    exclude: /node_modules/,
                    use: ["babel-loader"],
                },
            ],
        },
        plugins: [
            new HtmlWebpackPlugin({
                inject: true,
                template: path.resolve(__dirname, "./public/index.html"),
            }),
            new webpack.HotModuleReplacementPlugin(),
        ],
        devServer: {
            compress: true,
            hot: true,
            contentBase: "./build",
            historyApiFallback: true,
        },
        devtool: "inline-source-map",
    };
};

.babelrc

{"presets": [["react-app", {"runtime": "automatic"}]]}

Answer 1

Got it to work had to change filename: "static/js/bundle.js" to filename: "static/js/[name].js"

output: {
    path: undefined,
    publicPath: "/",
    filename: "static/js/[name].js",
    chunkFilename: "static/js/[name].chunk.js",
}