javascript - Webpack,优化分块给出“冲突:多个块将资产发送到相同的文件名”错误
问题描述
信息
我正在尝试生成自己的 webpack 配置,但在使其正常工作时遇到了一些问题。
问题
当尝试使用优化将文件拆分为块时,我收到如下错误
错误:冲突:多个块将资产发送到相同的文件名 static/js/bundle.js(块 main 和 vendor-node_modules_react-hot-loader_patch_js-node_modules_react_jsx-dev-runtime_js-node_mod-4610d2)
如果我删除优化部分,它可以工作但没有分块。我查看了创建反应应用程序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"}]]}
解决方案
让它工作必须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",
}
推荐阅读
- python - 按列(ID)重复透视数据框
- java - notifyDataSetChange 在自定义适配器上无法正常工作
- javascript - 是否可以从 JS 函数调用 Google Maps Javascript API 并将其显示在 ion-content 上?
- python - pygame蛇游戏创建自动化不起作用
- postgresql - 在 CI 上运行 cypress 时执行 postgres 初始化脚本
- laravel - 分页必须返回 206 而不是 200
- rdf - How are blank nodes used in the context of understanding RDF triple statements?
- reactjs - 如何在没有 authProvider 的情况下使用注销按钮
- pandas - python中pandas中的数据框
- linux - 脚本内批准屏幕,尽管已获得批准,但仍显示签名以供批准