無法讀取未定義的Webpack Bootstrap React的屬性“調用”

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注入文件的文件順序有關。 解決此問題的方法是使用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數組的指定順序返回每個塊。

Answer 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，這會更好

Answer 3

我解決了升級到Babel 7的問題https://babeljs.io/docs/en/v7-migration 。 使用命令npx babel-upgrade