webpack - 你如何链接由 Webpack 4 分割的块?
问题描述
问题
我有一个使用 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 下载模块的行为?
解决方案
答案是使用HtmlWebpackPlugin
推荐阅读
- node.js - 使用nodejs REST API更新mongodb中的布尔值
- garbage-collection - 第 2 代堆不断攀升
- dart - 如何以数组作为参数发送 GET 请求?
- c# - 找不到或无法从 IIS 访问 SQL Server
- lazarus - 在 Lazarus 中,我如何找到 Form1 上使用的“真实”字体值?
- java - 如何将 Testcontainers 与 @DataJpaTest 结合使用以避免代码重复?
- python - 仅替换包含字母数字、字符串和数值的列中的数值?
- html - 输入复选框在 div 中不可点击
- python - 为什么在尝试从 api 获取数据时出现此错误“TypeError:字符串索引必须是整数”?
- sql-server - 多个 CSV,一个结构 -> 使用 SSIS 的多个表