webpack 的 Magic Comments（魔法注释）

通过在代码中写入魔法注释，来实现一些 webpack 的特性，例如给 chunk 命名、选择不同模式等。

// 单个目标
import(
  /* webpackChunkName: "my-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}`
);
​
// webpackIgnore的值设置为true时，会禁用动态导入解析，并且不会进行代码分割！
import(/* webpackIgnore: true */ 'ignored-module');

以上代码列出了魔法注释中可能的取值。

• webpackChunkName: string

新 chunk 的名称。 从 webpack 2.6.0 开始，占位符 [index] 和 [request]分别支持递增的数字或实际的解析文件名。 添加此注释后，将单独的给我们的 chunk 命名为 [my-chunk-name].js 而不是 [id].js。

• webpackMode: 'lazy' | 'lazy-once' | 'eager' | 'weak'

从 webpack 2.6.0 开始，可以指定以不同的模式解析动态导入。

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

• webpackPrefetch: boolean

告诉浏览器将来可能需要该资源来进行某些导航跳转。

• webpackPreload: boolean

预加载，告诉浏览器在当前导航期间可能需要该资源。4.6+才支持，如果是老版本 webpack，可以使用preload-webpack-plugin这种插件来实现预加载。

• webpackInclude: string | RegExp

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

• webpackExclude: string | RegExp

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

• webpackExports: string[]

告知 webpack 只构建指定出口的动态 import() 模块。它可以减小 chunk 的大小。从 webpack5开始可用。