在 webpack 的术语中，块是一种资产，不应与一个文件中的其他所有内容捆绑在一起，而应以某种方式分开。我猜在你的代码中你没有异步导入你的样式或者有任何特殊的splitChunks配置。这指示 webpack 将每个 css 简单地放入一个文件中，因此chunkFilename选项保持未使用状态。
检查下面的一些示例（我知道）可以创建一些块。
实施例1
// App.js
import './a.css';
import './b.css';
import './c.css';
//webpack.config.js
module.exports = {
//... other configs
module: {
rules: [{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: 'chunk-[id].css',
})
]
}
这里我们简单的进入dist文件夹amain.css文件包含a,b,c风格。chunkFilename在这种情况下仍然未使用。
实施例2
// App.js
import './a.css';
import ( /* webpackChunkName: "my-special-style" */ './b.css');
import './c.css';
//webpack.config.js
module.exports = {
//... other configs
module: {
rules: [{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: 'chunk-[id].css',
})
]
}
在现在的设置中，我们使用async import我们将再次进入 dist 文件夹main.css现在只包含a,c样式和一个名为的新文件chunk-my-special-style.css这基本上是b.css。正如你所理解的b.css is a chunk现在它具有 webpack 提供的所有功能，例如chunkFilename.
实施例3
// App.js
import './a.css';
import './b.css';
import './c.css';
//webpack.config.js
module.exports = {
//... other configs
module: {
rules: [{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
}]
},
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'ultra-special-styles',
test: /c\.css$/,
chunks: 'all',
enforce: true
}
}
}
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: 'chunk-[id].css',
})
]
}
现在在此设置中，我们使用splitChunks配置。顾名思义，我们有能力根据某些条件（正则表达式、函数等）创建自己的块。虽然这些文件不会被异步导入，但是使用这些优化非常重要，以免我们的文件（无论是 js 还是 css）变得臃肿。在此示例中，我们最终将位于 dist 文件夹中，再次带有main.css文件包含a,b风格和chunk-ultra-special-styles.css这基本上是c.css。在 - 的里面splitChunks选项我们指定块的名称（就像我们上面使用注释所做的那样）和正则表达式来匹配应该位于单独块/文件上的所需文件。其他所有事情都由 webpack 和 MiniCssExtractPlugin 的魔力在内部处理！
