问题

我有一个使用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。我的理解是,我需要在模板中编写两个脚本标记,如:

<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将从服务器中获取。在网页包4中,这将是:

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

但在webpack中执行此操作时,必须将依赖项捆绑包作为脚本标记列出。导入时它不会去下载jquery。

网页包动态导入

我知道webpack有动态导入,它返回一个承诺:

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

这与require.js类似,但用于分离应用程序功能。这不是我想做的。也许如果 import() 可以采用多个模块名,我只是用它来导入所有内容,但这绝对不是根据文档使用此功能的方式。

问题

1)如何通过编程知道哪些文件依赖于哪些文件,以便可以呈现正确的脚本标记?

2)有没有办法 import 要获得下载模块的行为,amd做时,模块没有链接在页面上已经?