如何为 import() 全局设置 webpackChunkName？答案

【问题标题】：How to set webpackChunkName for import() globally?如何为 import() 全局设置 webpackChunkName？
【发布时间】：2017-12-06 21:53:31
【问题描述】：

从 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
}

【问题讨论】：

我只是发表评论，因为我不确定答案，但如果我没记错的话，chunkFilename 是命名块的通用方式。如果你想覆盖它，你可以使用新的魔法评论webpackChunkName
我可以看到你的完整答案:) 吗？ @Ematipico
不可能使用chunkFilename，此选项仅接受：[name]、[id] 和[chunkhash] 占位符，并且[name] 取自输出包文件名，而不是来自导入的模块文件名。覆盖它的唯一方法是像我在第一个 sn-p 中所做的那样通过魔术注释，但不幸的是，这必须分别为每个导入的模块完成。
您是否尝试使用chunkFilename 的回调函数？我不知道webpack.js.org/configuration/output/#outputchunkfilename 是什么。函数的接口是function (pathData, assetInfo) => string
另一种选择是查看webpack.js.org/configuration/output/#template-strings 并查看例如[base]（包含文件名和扩展名）是否适用于卡盘文件名

标签： javascript webpack webpack-3

【解决方案1】：

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

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

您可以使用加载程序来覆盖所有魔法 cmets。我为动态import() 创建了一个loader to insert magic comments。

它依靠RegExp 来查找动态导入，并依靠replace 添加配置的魔法cmets。

这是正在使用的正则表达式 (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 来进一步配置magic cmets，包括基于文件路径的overrides。查看readme。已包含任何类型的 cmets 的动态导入将被忽略。

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

【讨论】：