问题
我有一个使用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模块未在页面中链接时所执行的模块的行为？
1 回答
答案是使用HtmlWebpackPlugin