如何链接由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