javascript - 无法读取未定义的 Webpack Bootstrap React 的属性 'call'

Question

我遇到了一个问题，我发现其他人也遇到过这个问题。我遇到的唯一问题是我找到的所有解决方案似乎都不适合我。当我构建项目时，一切都成功，没有错误。然后，我在 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/ `

Answer 1

我实际上找到了发生此错误的原因。看来问题与我的 html-webpack-plugin 的文件顺序有关。正在注入(inject)文件。解决此问题的方法是使用 html-webpack-plugin 提供的 chunks 和 chunksSortMode 属性。代码看起来像这样:

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 数组的指定顺序返回每个 block 。