Webpack优化代码分块时出现“冲突：多个代码块输出到相同的文件名”错误。

Question

信息

我正在尝试生成自己的webpack配置，但在设置优化以将文件拆分成块时遇到了一些问题。

问题

当尝试使用优化功能将文件拆分成块时，会出现以下错误：

错误：冲突：多个块将资产发射到相同的文件名 static/js/bundle.js（chunks main 和 vendors-node_modules_react-hot-loader_patch_js-node_modules_react_jsx-dev-runtime_js-node_mod-4610d2）

如果我删除优化部分，它就可以工作，但没有块。我已经查看了create react app webpack.config.js 来参考其生成的内容。

正如您所看到的，他们已经在开发和生产中使用了优化部分，并将文件拆分成块。为什么我在使用它时会出现冲突错误？

代码

我的配置文件的简化版本（runtimeChunk被禁用，因为它也会导致相同的冲突错误）

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"}]]}

- Rajohan

Answer 1

已经解决了，必须将filename: "static/js/bundle.js"更改为filename: "static/js/[name].js"

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

- Rajohan

Answer 2

如果你正在处理一个已经被弹出的Create React App，并且遇到了类似的错误:

多个块将资源发布到相同的文件名静态/js/bundle.js (块main和runtime-main)

那么你只需在输出配置中更改文件名属性即可:

filename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].js'
        : isEnvDevelopment && 'static/js/bundle.js',

to

filename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].js'
        : isEnvDevelopment && 'static/js/[name].js',

在这里，[name] 占位符为每个输出包提供了不同的名称，而不是固定的名称。

在我的情况下，它是由我使用 optimization 中的 runtimeChunk 属性生成的 runtime-main.js 文件引起的。

runtimeChunk: {
  name: entrypoint => `runtime-${entrypoint.name}`,
},

- Giorgio Tempesta