Webpack 错误，加载块失败答案

【问题标题】：Webpack error, Loading chunk failedWebpack 错误，加载块失败
【发布时间】：2018-12-20 06:16:19
【问题描述】：

堆栈：Webpack 4.16.0、Node8、Vuejs2

我在为我的 Vuejs 应用程序提供服务时看到以下错误。

Error: Loading chunk 4 failed.
(missing: https://myapp.com/ui.chunk.bundle.js)
    at HTMLScriptElement.s (demo:1)

此错误在构建中是一致的，实际文件本身可通过 URL 访问。

我正在通过import() 使用代码拆分，并且初始应用程序加载正常，但是当加载另一个块时流程会中断，它也可以在ui.chunk.bundle.js 和vendors~ui.chunk.bundle.js 之间变化。

在为生产构建时，会显示一个新错误，但它似乎与加载模块有关：

demo:1 TypeError: Cannot read property 'call' of undefined
    at o (demo:1)
    at Object.349 (ui.chunk.bundle.js:1)
    at o (demo:1)
    at o.t (demo:1)

我已经尝试升级 webpack 和 babel，但我不知道这可能会导致什么问题，因为它之前工作得非常好。

在我的本地机器上而不是在 Google App Engine 上运行应用程序时，一切似乎都很好。

应用的加载方式： 它通过脚本标签加载到其他网站，因此domainA.com 运行调用myapp.com/js 的脚本标签并开始流程，即应用程序根据某些逻辑加载各种块。

在 myapp.com 访问 webpack 生成的索引页面包时，一切都正确加载。

请帮忙！

【问题讨论】：

您能找到一些有用的东西来解决这个错误吗？
升级 webpack 解决了这个问题。
您是否禁用了文件名哈希？然后浏览器可能会加载旧（缓存）版本的 JS 文件。前段时间遇到了同样的问题..
我认为 Webpack 4 使不存在的导入成为警告而不是错误，stackoverflow.com/questions/40071942/…

标签： javascript webpack vue.js babeljs

【解决方案1】：

这是相当深入的，肯定不容易通过两步修复，最好使用 cli 创建一个新项目，如果使用推荐的预设方便，如果它仍然存在，请检查你安装的 npm 包并确保它们都没有停止并且至少根据您的 vue 版本是最新的。

【讨论】：

【解决方案2】：

这可能是由于“webpack.config.js”，您可以尝试更新输出对象

module.exports = {
  output: {
    chunkFilename: '[id].chunk.[chunkhash].js',
  }
};

希望它会起作用！

【讨论】：

【解决方案3】：

这可能是跨站点脚本问题。确保 myapp.com 设置正确的标题。

在 myapp.com 上，设置此标头：

Access-Control-Allow-Origin: https://domainA.com

您还应该确保您的脚本标签已将 async 设置为 false：

<script async="false" …

【讨论】：