Webpack 4：在运行时通过JS加载splitChunks模块

Question

我的webpack构建输出3个包。

1. 切入点。
2. node_modules代码，由splitChunks生成
3. 提取的css文件。

这是一个供其他开发人员使用的库，因此我不控制加载入口点的HTML。用户将使用<script>包含入口点，然后我的应用程序代码应该以某种方式加载具有散列名称的bundle 2 && 3。

为了清楚起见，我不想加载带有动态导入的模块（即你安装的模块或你导入的文件），我想加载包含模块的webpack输出块。

（我实际上有2个入口点，这就是为什么捆绑＃2存在，但为了简单起见，我把它留了下来。）

Answer 1

Webpack v4有最新的升级。以前如果我们进行代码拆分，你可以在浏览器的devTools中看到initiator中的main.bundle.js的*(index)*，这意味着index.html要求main.bundle.js。之后所有脚本都从bootstrap_a877加载.... （脚本）这是负责异步加载文件的Webpack脚本。使用Webpack的动态导入功能时，此脚本会自动添加到构建中。

但是在webpack v4中我们有runtimeChunk，它实际上成了所有bundle的发起者。您可以在开发工具中看到它。您需要启用runtimeChunk

optimization: {
    runtimeChunk: 'single',
}

我希望这会有所帮助。

My answer on a different post regarding code splitting