内联注释

2024年11月23日

柏拉文

越努力，越幸运

一、webpackMode

webpackMode: 可以指定以不同的模式解析动态导入, 可选项如下:

lazy: （默认）：为每个 import() 导入的模块，生成一个可延迟加载(lazy-loadable) chunk。
lazy-once: 生成一个可以满足所有 import() 调用的单个可延迟加载(lazy-loadable) chunk。此 chunk 将在第一次 import() 调用时获取，随后的 import() 调用将使用相同的网络响应。注意，这种模式仅在部分动态语句中有意义，例如 import(./locales/${language}.json)，其中可能含有多个被请求的模块路径。
eager: 不会生成额外的 chunk，所有模块都被当前 chunk 引入，并且没有额外的网络请求。仍然会返回 Promise，但是是 resolved 状态。和静态导入相对比，在调用 import（）完成之前，该模块不会被执行。
weak: 尝试加载模块，如果该模块函数已经以其他方式加载（即，另一个 chunk 导入过此模块，或包含模块的脚本被加载）。仍然会返回 Promise，但是只有在客户端上已经有该 chunk 时才成功解析。如果该模块不可用，Promise 将会是 rejected 状态，并且网络请求永远不会执行。当需要的 chunks 始终在（嵌入在页面中的）初始请求中手动提供，而不是在应用程序导航在最初没有提供的模块导入的情况触发，这对于通用渲染（SSR）是非常有用的。

二、webpackInclude

webpackInclude: 在导入解析(import resolution)过程中，用于匹配的正则表达式。只有匹配到的模块才会被打包。

三、webpackExclude

webpackExclude: 在导入解析(import resolution)过程中，用于匹配的正则表达式。所有匹配到的模块都不会被打包。

四、webpackPreload

webpackPreload: 预加载（preload）, 告诉浏览器一定会用到某个资源，浏览器会提升这个资源的加载优先级为 High, 表现如下:

预加载 chunk 会在父 chunk 加载时以并行方式开始加载
预加载 chunk 具有中等优先级，并会立即下载
预加载 chunk 会在父 chunk 中立即请求，用于当下时刻;

深入学习 Preload、Prefetch 以及网络加载优先级

五、webpackPrefetch

webpackPrefetch: 预获取（prefetch）,告诉浏览器可能会用到某个资源，浏览器会以一个非常低的优先级 lowest,在空闲时间段加载这个资源, 表现如下:

预获取 chunk 会在父 chunk 加载结束后开始加载
预获取 chunk 则在浏览器闲置时下载
预获取 chunk 则用于未来的某个时刻

深入学习 Preload、Prefetch 以及网络加载优先级

六、webpackChunkName

6.1 认识

webpackChunkName 是 Webpack 动态导入（import()）的一个魔法注释（magic comment），用于给动态导入的 chunk 指定一个自定义名称。通过为 chunk 命名，可以让生成的文件名称更具可读性和可维护性，而不是默认的随机数字 ID。

6.2 语法

webpack.config.js 配置如下

output: {
    clean: true, // 每次构建清理旧文件
    path: Path.resolve(process.cwd(), "dist"),
    filename: "[name]/[name].[contenthash:8].js", // 按 entry 名称创建子目录
    chunkFilename: "[name]/[name].[contenthash:8].js", // 懒加载模块也按 entry 存放
}

page/index.ts 动态引入如下

import(/* webpackChunkName: "word" */ "./word").then(({ printWord }) => {
  printWord("word");
});

import(/* webpackChunkName: "PageA/word" */ "./word").then(({ printWord }) => {
  printWord("word");
});

import(/* webpackChunkName: "PageA/hello" */ "./hello").then(
  ({ printHello }) => {
    printHello();
  }
);

七、webpackIgnore

注意: 将 webpackIgnore 设置为 true 则不进行代码分离。

一、webpackMode​

二、webpackInclude​

三、webpackExclude​

四、webpackPreload​

五、webpackPrefetch​

六、webpackChunkName​

6.1 认识​

6.2 语法​

七、webpackIgnore​