无法读取未定义的 Webpack Bootstrap React 的属性“调用”答案

【问题标题】：Cannot read property 'call' of undefined Webpack Bootstrap React无法读取未定义的 Webpack Bootstrap React 的属性“调用”
【发布时间】：2017-12-02 06:42:08
【问题描述】：

我遇到了其他人也遇到过的问题。我遇到的唯一问题是我找到的所有解决方案似乎都不适合我。当我构建我的项目时，一切都成功而没有错误。然后我在我的 dist 文件夹中的构建项目上启动 webpack-dev-server。当我打开浏览器时，我收到以下错误：

现在当我在开发模式下运行webpack-dev-server 时不会发生这种情况。简单的解释是因为我没有在我的webpack.config.dev.js 文件中执行任何代码拆分。所以我知道我的CommonsChunkPlugin 出现了问题。我只是无法确定确切的原因。这是我正在处理的 repo 的链接： Nappstir/react-landing-page。这个项目没有什么复杂的。我只是想为将在React 中构建的基本登录页面构建一个模板，因此没有连接Redux。关于可能导致此错误的任何想法？

您可以克隆此项目并简单地运行 npm install 和 npm run build 来构建项目。然后只需访问'http://localhost:3000/`

【问题讨论】：

对此有解决方案吗？

标签： javascript twitter-bootstrap reactjs webpack webpack-dev-server

【解决方案1】：

我实际上找到了为什么会发生此错误的原因。看来问题与我的html-webpack-plugin 注入文件的文件顺序有关。解决此问题的方法是使用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 数组的指定顺序返回每个块。

【讨论】：

【解决方案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，这会更好

【讨论】：

【解决方案3】：

我解决了升级到 Babel 7 https://babeljs.io/docs/en/v7-migration 的问题。使用命令npx babel-upgrade

【讨论】：