从Webpack 3迁移到Webpack 4

Question

我正尝试迁移到Webpack 4，但这真的很痛苦。在花费了几天时间将Webpack 3插件移动到Webpack 4本地内容后，我似乎已经成功渲染了js，但当我去我的网站时，在控制台上出现了这个消息：

Uncaught TypeError: (intermediate value)(intermediate value).push is not a function

发生在:

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["Index"],{

这是我的Webpack output设置：

output: {
    filename,
    path: path.resolve(__dirname, 'public', 'build', 'js'),
    jsonpFunction: 'webpackJsonp', // TODO gotta figure that out
},

我做错了什么？

- Pablo

---

你能展示一下你的完整webpack文件吗？ - Lazar Nikolic

我写了一篇关于如何设置Webpack 4的文章，希望能对你有所帮助。https://medium.freecodecamp.org/how-to-conquer-webpack-4-and-build-a-sweet-react-app-236d721e6745 - Adeel Imran

为什么需要一个非默认的jsonpFunction？ - PlayMa256

Answer 1

刚遇到了同样的问题，我在这个帖子中找到了答案：https://github.com/webpack/webpack/issues/6985

当你使用 Webpack < 4 捆绑模块时，似乎会出现这种情况。如果有帮助，我将其发布在这里。

将 output.jsonpFunction https://webpack.js.org/configuration/output/#output-jsonpfunction 修改为 jsonpFunction 即可解决问题：

{
  output: {
    jsonpFunction: 'jsonpFunction',
    ...
  }
}

这里要感谢 @sokra（Webpack的创建者）：https://github.com/webpack/webpack/issues/6985#issuecomment-380795070

- t3__rry

---

顺便说一下，我在使用React-Loadable进行代码拆分时遇到了问题。 - t3__rry

非常感谢这个答案。我一直在努力想找到解决方案。我在同一页上有两个构建的相同问题。一个项目使用webpack 3，另一个是新的。 - Ronn Wilder

很高兴能帮上忙，这是一个相当难以调试的问题。 - t3__rry