Webpack,优化分块给出“冲突:多个块将资源发送到同一文件名”错误

2024-06-26

Info

我正在尝试生成自己的 webpack 配置,但在使其正常工作时遇到一些问题。

Problem

当尝试使用优化将文件分割成块时,我收到如下错误

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

如果我删除优化部分,它可以工作,但不会分块。我查看了创建反应应用程序webpack.config.js https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js#L309在生成时获取一些参考内容。

正如您所看到的,他们有优化部分,可在开发和生产中进行分块。为什么我在使用的时候会出现冲突错误?

Code

我的配置的缩小/简化版本(禁用了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"}]]}

让它工作必须改变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",
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Webpack,优化分块给出“冲突:多个块将资源发送到同一文件名”错误 的相关文章

随机推荐