如何链接由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具有动态导入功能，该功能可以返回承诺：

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

这类似于Require.js，但用于隔离应用程序功能。这不是我想要的。如果import()可以使用多个模块名称，而我只是用它来导入所有内容，那也许行得通，但这绝对不是根据文档使用该功能的方式。

问题

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

2）当模块尚未在页面中链接时，有没有办法使用import来获得AMD进行下载的行为？

Answer 1

答案是使用HtmlWebpackPlugin