问题
我有一个使用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
是我的入口点。这三个页面都会使用 jQuery,而它们的依赖文件则包含在 vendor 文件中。据我理解,在模板中需要写入两个 script 标签,如下:
<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) {
...
});
在 Webpack 4 中,jQuery 将从服务器获取。
import $ from 'jquery';
import MyModule from 'my-module';
但是,在Webpack中这样做时,您必须将依赖捆绑包列为脚本标记。当导入时,它不会去下载jQuery。
Webpack 动态导入
我知道Webpack有动态导入功能,它返回一个Promise:
import('lodash').then(_ => {
...
});
这类似于Require.js,但是旨在隔离应用程序功能。这不是我想要做的事情。也许如果import()
可以接受多个模块名称并且我只使用它来导入所有内容,那么它可能有效,但根据文档,这绝对不是该功能的预期用法。
问题
1)您如何以编程方式知道哪些文件依赖于哪些文件,以便您可以呈现正确的脚本标签?
2)是否有一种方法可以使用import
获取AMD下载模块时执行的行为,当模块尚未链接到页面中时?