如何全局为 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。

您可以使用加载器来覆盖所有魔术注释。为此，我创建了魔术评论加载器。

加载器可以像这样使用：

来源

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。查看文档。