DaMeng

webpack 魔法注释

发表于 更新于 分类于 ，

webpack 魔法注释

使用 import 语句导入模块时，可以使用使用 webpack 魔法注释完成一些配置，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 单个目标
import(
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  /* webpackExports: ["default", "named"] */
  'module'
);

// 多个可能的目标
import(
  /* webpackInclude: /\.json$/ */
  /* webpackExclude: /\.noimport\.json$/ */
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  `./locale/${language}`
);


import(/* webpackIgnore: true */ 'ignored-module.js');
  • webpackIgnore：设置为 true 时，禁用动态导入解析。
  • webpackChunkName：设置 chunk 名称，从 webpack 2.6.0 开始，占位符 [index] 和 [request] 分别支持递增的数字或实际的解析文件名。 添加此注释后，会将 chunk 命名为 [my-chunk-name].js 而不是 [id].js。
  • webpackMode：从 webpack 2.6.0 开始，可以指定以不同的模式解析动态导入
    • 'lazy' (默认值)：为每个 import() 导入的模块生成一个可延迟加载（lazy-loadable）的 chunk。
    • 'lazy-once'：只生成一个可以满足所有调用的可延迟加载（lazy-loadable）的 chunk。此 chunk 将在第一次 import() 时获取，随后的 import() 则使用之前的请求结果。这个模式仅在部分动态语句中有意义，例如 import(./locales/${language}.json)，这条语句可能会请求多个模块。
    • 'eager'：不会生成额外的 chunk。所有的模块都被当前的 chunk 引入，并且没有额外的网络请求。但是仍会返回一个 resolved 状态的 Promise。与静态导入相比，在调用 import() 完成之前，该模块不会被执行。
    • 'weak'：尝试加载模块，如果该模块函数已经以其他方式加载，（即另一个 chunk 导入过此模块，或包含模块的脚本被加载）。 但是只有在客户端上已存在该 chunk 时才会成功解析，返回 Promise。如果该模块不可用，则返回 rejected 状态的 Promise。网络请求永远都不会执行。
  • webpackPrefetch：告诉浏览器将来可能会调转到该资源
  • webpackPreload：告诉浏览器在当前导航期间可能需要该资源
  • webpackInclude：配置需要导入模块的正则，匹配到的模块才会被打包
  • webpackExclude：配置不需要导入模块的正则，匹配到的模块不会被打包
  • webpackExports： 告诉 webpack 在使用动态导入时，只打包这个模块使用的导出项。它可以减小 chunk 的大小。从 webpack 5.0.0-beta.18 起可用。