javascript - 如何为 import() 全局设置 webpackChunkName？

Question

从 Webpack@3.0.0 开始，我们有了这个强大的功能，可以启用命名的 block 文件:

import(
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy-once" */
  'module'
);

但是，我现在有 40 个这样的导入，并且更改每个都有点麻烦。

有什么方法可以定义webpackChunkName和 webpackMode全局所有 block ？

我在 webpack.config.js 中想象这样的事情:

output: {
    filename:      'js/[name].js',
    chunkFilename: 'js/[filename].js' // so that import('module') creates module.js
    chunkMode:     'lazy-once' // so I can override default `lazy` option once and for all
}

Answer 1

Is there any way to define webpackChunkName and webpackMode globally for all chunks?

不，不是作为内置的 webpack 配置选项。您也许可以使用 SplitChunksPlugin和 optimization.splitChunks.cacheGroups适本地命名您的动态导入，但这只会涵盖 webpackChunkName .
您可以使用加载器来覆盖所有魔术注释。我创建了一个 loader to insert magic comments动态import() .
它依赖于 RegExp查找动态导入和 replace 添加配置的魔术注释。
这是正在使用的正则表达式 (regexr):

/(?<![\w.]|#!|\*[\s\w]*?|\/\/\s*|['"`][^)$]*)import\s*\((?!\s*\/\*)(?<path>\s*?['"`][^)]+['"`]\s*)\)(?!\s*?\*\/)/g

加载器可以这样使用:

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'magic-comments-loader',
        options: {
          webpackChunkName: true,
          webpackMode: 'lazy',
          webpackIgnore: 'src/ignore/**/*.js',
          webpackPrefetch: [
            'src/prefetch/**/*.js',
            '!src/prefetch/not/*.js'
          ]
        }
      }
    }
  ]
}

您可以使用加载器options进一步配置魔术注释，包括overrides基于文件路径。查看 readme .已包含任何类型注释的动态导入将被忽略。
注意:您需要运行支持后向断言和正则表达式中命名捕获组的 Node.js 版本，所以 >= 10.3.0 .请参阅 node.green 上的支持表.