mini-css-extract-plugin 模块的 chunkFilename 的用途是啥？

Posted 2023-03-07

【中文标题】mini-css-extract-plugin 模块的 chunkFilename 的用途是啥？

【英文标题】：What is the Purpose of chunkFilename of mini-css-extract-plugin Module?mini-css-extract-plugin 模块的 chunkFilename 的用途是什么？

【发布时间】：2019-06-13 12:31:06

【问题描述】：

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

参考如下。

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

所以，我的问题是，

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

chunkFilename 的作用是什么？

如何查看文件？

【参考方案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 文件夹，其中有一个 main.css 现在只包含 a,c 样式和一个名为 chunk-my-special-style.css 的新文件，基本上是 b.css .如您所知，b.css 现在是 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 的魔法在内部处理！