我遇到了一个我发现其他人也有的问题。我遇到的唯一问题是我发现的所有解决方案似乎都不适合我。当我构建我的项目时,一切都成功而没有错误。然后我在我的dist文件夹中的已构建项目上启动webpack-dev-server
。当我打开浏览器时收到以下错误:
现在,当我在开发模式下运行webpack-dev-server
时,不会发生这种情况。简单的解释是因为我没有在webpack.config.dev.js
文件中执行任何代码拆分。所以我知道CommonsChunkPlugin
发生了问题。我无法确切地说明原因。这是我正在处理的回购链接的链接:
Nappstir/react-landing-page。这个项目没有什么复杂的。我只是尝试为React
内置的基本着陆页构建模板,因此没有连接Redux
。关于什么可能导致此错误的任何想法?
您可以克隆此项目,只需运行npm install
和npm run build
即可构建项目。然后访问'http://localhost:3000/`
答案 0 :(得分:2)
我实际上找到了为什么发生此错误的原因。问题似乎与我的html-webpack-plugin正在注入文件的文件顺序有关。解决这个问题的方法是使用chunks
& chunksSortMode
提供的html-webpack-plugin
属性。代码看起来像这样:
chunks: ['manifest', 'vendor', 'main'],
chunksSortMode: function (a, b) {
let orders = ['manifest', 'vendor', 'main'];
if (orders.indexOf(a.names[0]) > orders.indexOf(b.names[0])) {
return 1;
} else if (orders.indexOf(a.names[0]) < orders.indexOf(b.names[0])) {
return -1;
} else {
return 0;
}
},
然后按照chunks
数组的指定顺序返回每个块。
答案 1 :(得分:2)
chunks: ['manifest', 'vendor', 'main'],
chunksSortMode: function (a, b) {
const orders = ['manifest', 'vendor', 'main'];
return orders.indexOf(a.names[0]) - orders.indexOf(b.names[0]);
}
根据@Nappstir,这会更好
答案 2 :(得分:0)
我解决了升级到Babel 7 https://babeljs.io/docs/en/v7-migration的问题。使用命令npx babel-upgrade