你如何 link 由 Webpack 4 分割的块？

Question

问题

我有一个使用 Webpack 4 的项目，想要启用代码拆分。我有这个配置来启用拆分块。

  optimization: {
    splitChunks: {
      chunks: 'all'
    },
  }

当我运行构建时，我得到一些文件名：

about-d434910cfbfb3b1f4f52.js
billing-d434910cfbfb3b1f4f52.js
login-d434910cfbfb3b1f4f52.js
vendors~about~billing~login~~97fa390a-d434910cfbfb3b1f4f52.js

about.js、billing.js、login.js是我的切入点。供应商文件包含在这 3 个页面上使用的 jQuery。我的理解是我需要在模板中编写 2 个脚本标签，例如：

<script type="text/javascript" src="http://0.0.0.0:8000/assets/bundles/vendors~about~billing~login~~97fa390a-d434910cfbfb3b1f4f52.js" ></script>
<script type="text/javascript" src="http://0.0.0.0:8000/assets/bundles/about-d434910cfbfb3b1f4f52.js" ></script>

这是有道理的，但我不清楚我应该如何知道如何将哪些供应商文件与哪个入口点文件连接起来。在这种情况下，只有一个供应商文件，但我的项目有更多的依赖项，所以实际上可能还有 3 个。更不用说这些会随着代码的更改而更改。

比较 Require.js

在 Require.js 你会这样做：

define(['jquery', 'my-module'], function($, myModule) {
  ...
});

和 jQuery 将从服务器获取。在 Webpack 4 中，这将是：

import $ from 'jquery';
import MyModule from 'my-module';

但是当您在 Webpack 中执行此操作时，您必须将依赖包列为脚本标记。导入时不会去下载jQuery

Webpack动态导入

我知道 Webpack 有动态导入，returns 一个承诺：

import('lodash').then(_ => {
    ...
});

这类似于 Require.js，但用于分离应用程序功能。这不是我想做的。如果 import() 可以采用多个模块名称并且我只是用它来导入所有内容，那么它可能会起作用，但这绝对不是根据文档使用此功能的方式。

问题

1) 您应该如何以编程方式知道哪些文件依赖于哪些文件，以便您可以呈现正确的脚本标签？

2) 有没有一种方法可以使用 import 获取当模块尚未在页面中链接时 AMD 执行的下载模块的行为？

Answer 1

答案是使用HtmlWebpackPlugin

你如何 link 由 Webpack 4 分割的块？

How do you link chunks split by Webpack 4?

webpack

webpack-4

问题

比较 Require.js

Webpack动态导入

问题