mini-css-extract-plugin模块的chunkFilename有什么作用？

Question

我现在正在使用mini-css-extract-plugin模块，并设置它的chunkFilename值，并通过运行它来确保"[id].css"的值。但是，我看不到这个文件。

参考资料如下。

https://webpack.js.org/plugins/mini-css-extract-plugin/#minimal-example

所以，我的问题是，

mini-css-extract-plugin的chunkFilename是什么？

chunkFilename的用途是什么？

你怎么能看到这个文件？

Answer 1

在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文件夹中获得一个包含a,b,c样式的main.css文件。在此场景中，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文件夹，其中包含一个现在只包含a,c样式的main.css和一个名为chunk-my-special-style.css的新文件，该文件基本上就是b.css。正如您所理解的，b.css现在是一个chunk，因此它具有像chunkFilename一样由webpack提供的所有功能。

示例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文件夹中结束，同样是一个包含a,b样式和基本上为c.css的chunk-ultra-special-styles.css的main.css文件。在splitChunks选项中，我们指定块的名称(就像我们上面使用注释所做的那样)和一个正则表达式，以匹配应该在单独的块/文件上的所需文件。其他的一切都是由webpack和MiniCssExtractPlugin的魔法在内部处理的！