24

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

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

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

有没有办法为所有块定义webpackChunkName和webpackMode全局？

我想象这样的事情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
}
4

1 回答 1

1

有没有办法为所有块定义webpackChunkName和webpackMode全局？

不，不是作为内置的 webpack 配置选项。您也许可以使用SplitChunksPluginandoptimization.splitChunks.cacheGroups来适当地命名您的动态导入，但这只会涵盖webpackChunkName.

您可以使用加载器来覆盖所有魔术注释。我创建了一个加载器来为动态插入魔术注释import()。

它依靠 aRegExp来查找动态导入并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基于文件路径。查看自述文件。已包含任何类型注释的动态导入将被忽略。

注意：您需要运行支持后向断言和正则表达式中命名捕获组的 Node.js 版本，因此>= 10.3.0. 请参阅node.green中的支持表。

于 2021-09-06T20:38:25.630 回答