如何在全局范围内为import()设置webpackChunkName？

Question

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

Answer 1

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

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

您可以使用加载器来覆盖所有神奇的注释。我为此目的创建了magic-comments-loader 。

加载器可以这样使用：

源代码

import('module.js')

webpack.config.js

module: {
  rules: [
    {
      test: /\.js$/,
      use: {
        loader: 'magic-comments-loader',
        options: {
          webpackChunkName: true,
          webpackMode: 'lazy'
        }
      }
    }
  ]
}

建造

import(/* webpackChunkName: "module", webpackMode: "lazy" */ 'module.js')

您可以使用加载程序options进一步配置魔术注释，包括overrides基于文件路径。查看文档。