我知道 webpack 中有代码拆分，允许我们将供应商代码拆分为另一个块。但是，随着项目越来越大，我也想将源代码拆分为许多较小的文件。例如，vendor.js 现在是 400kb，而 main.js 大约是 1MB（丑化）。我想把它变成：

main.js（需要）-model.js
-
network.js
...

除了使用require.ensure，还有其他方法吗？

有没有办法在 webpack 2 上配置异步块的后备？

这就是我想要的：

• 无法加载http://cdn.example.com/chunk-1.js -> 加载http://another-cdn.example.com/chunk-1.js
• 无法加载http://another-cdn.example.com/chunk-1.js -> 加载http://www.example.com/chunk-1.js

类似Fallback JS提供的功能 // Include `jQuery`. "jQuery": { // The URLs to load `jQuery`. "urls": [ "//.....some-bad-cdn...../.....FAIL-ON-PURPOSE.....", "//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min", "//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min" ] },

我已阅读代码拆分 - 异步文档。没有相关选项。

我得到解决方案的壁橱方法是向require.ensure 错误回调中的新 url 触发另一个 jsonp 请求，但我无法从错误事件中获取块 url。

======== 6 月 12 日更新 ========

在这个问题上取得了一些进展，但还有另一个障碍。公共路径可以动态更改，但我需要在 manifest.js 中注入 webpack 运行时代码中的代码（由 common chunk 插件生成）。

我正在尝试将动态 import() 添加到我的 React 组件中，并且它们工作正常。除了一个巨大的细节：只有 JavaScript 被加载，但 CSS Modules 提供的 CSS 没有。

这是代码：

这是应该发生的：

这是正在发生的事情：

反应：15.5.4 网络包：2.5.1

我在一个非常古老的项目中使用 angular 1.5 和 express。现在我需要对其进行改造（而不是重建）。

我正在添加一些 webpack 优化并将其传输到客户端渲染 Angular 应用程序并将服务器代码与客户端代码分离。

我的最终目标是 - 使用 webpack 2 和 angular 1.5，使用具有最新代码标准的 ES6,6 功能来制作完整的工作流程。

我想使用 webpack 2 的特性，比如代码拆分和 tree shaking，这样我就可以按需加载所有模块。

为此，我创建了一个 webpack 配置。如果我{modules: false}从中删除它可以正常工作，.babelrc但是添加它对于摇树是必不可少的。

我的问题是，这几乎是我实现摇树所需要做的一切。但即使在这一切之后，我的 app.hash.js 构建后的文件也包含所有angular代码lodash。相反，它应该是仅适用module于Angular且仅适用于 lodash 的代码map

这是我的应用索引

这是我的 webpack conf

这是按.babelrc文件

对于Webpack 2，与代码吐出require()有什么不同吗？require.ensure()

我有一个从requirejs基础转换的项目，并且require()仍然可以工作，并且似乎正在适当地拆分我的应用程序。有什么理由我应该require.ensure()改为吗？

我正在使用 Create-React-App 并希望使用 webpack 2.0 支持的动态 import() 来导入基于变量字符串的模块。

我查看了官方提案（https://github.com/tc39/proposal-dynamic-import），似乎可以这样做：

但是当我尝试类似的东西时它会中断。

AppRoutes.js

页面/默认/主页/index.js

损坏的服务/LazyLoad/index.js

错误：

但是当我将 LazyLoader 更改为

工作 服务/LazyLoad/index.js

有用。

绝对路径是在环境变量的帮助下内置在 create-react-app 中的。

.env

我需要以这种方式动态加载模块来构建多租户的概念证明。如何修复损坏的 LazyLoad 以便我可以将字符串作为道具传递并让 LazyLoad 组件从该字符串道具动态加载组件？

随着CommonsChunkPlugin我目前将我的代码分为：

所以page-1.html我加载以下脚本：

page-1.js它工作正常，所有共享代码page-2-authenticated.js都page-3-authenticated.js在common.js.

如您所见，我的应用程序要求用户登录page-2-authenticated.html和page-3-authenticated.html。page-2-authenticated.js但是，和中的共享代码page-3-authenticated.js也捆绑在common.js. 但我不想打扰未登录的用户，使用仅在您登录时使用的代码。

所以page-2-authenticated.html 我想拥有：

但是，当我在其中导出一个测试变量common-authenticated.js并将它们导入到page-2-authenticated.jsandpage-3-authenticated.js时，这个共享代码仍然捆绑到common.js. 并且common-authenticated.js是空的（只是一些webpackJsonp([12],[],[85]);）。

我有以下 webpack 2 配置：

问题：如何将特定代码捆绑到 中common-authenticated.js？有任何想法吗？

对象的构造

我想将“vue”提取到一个块，将“jquery”提取到一个块以及与“vue”相关的东西，例如“vuex”、“vue-router”到另一个块。CommonChunkPlugin 应该怎么做？

这些代码是我的配置，它将 vue 和 jquery 与其他代码结合在一起

非常感谢！

Webpack 似乎包含一些额外的代码而不是分块，也许我理解不import正确？

当我不想要它时，它似乎正在捆绑 Summernote（'./summernote' 的默认导出）。

如果我删除了初始导入并正确true放置了d1()Summernote 块。

有什么方法可以让它在包中包含成员 {detector}，但将 Summernote 默认导出放在单独的块中？

使用 Webpack 构建 ReactJS 应用程序。最近对使用代码拆分来减少应用程序大小感兴趣。

我已经尝试实现一个包装 System.import() 的自定义 HOC：

目前我正在尝试 react-loadable ( https://github.com/thejameskyle/react-loadable )，这是一个本质上做同样事情但有一些额外的花里胡哨的包。

问题

这两种方法在本地都可以正常工作，但在部署时不起作用。Webpack 配置源自 2017 年 3 月上旬的 React-Starter-App。我的直觉告诉我 webpack 配置是问题的根源，但我不确定如何调试它。

开发配置（工作）

暂存配置（不工作）

错误：react-loadable 会吞下所有错误（手掌 + 脸部），因此我无法从该代码中提供有用的错误。我的自定义组件会在引导加载程序中引发错误bootstrap 6a12c6c…:54 Uncaught (in promise) TypeError: Cannot read property 'call' of undefined

在我的自定义 HOC 的网络流量中，未加载额外的捆绑包。在 react-loadable 的网络流量中，捆绑包被加载，但从未被处理。