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的目的是什么？

如何查看该文件？

- diveintohacking

Answer 1

在Webpack的术语中，一个chunk是一种不应该与其他所有内容捆绑在一个文件中的资产，而应该以某种方式分离的资产。我猜你的代码中没有异步导入样式或任何特殊的splitChunks配置。这会指示Webpack将每个CSS都放在一个文件中，因此chunkFilename选项保持未使用状态。

请查看下面一些可以创建一些chunks的示例（我知道的）。

示例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`文件夹结束，并再次有一个包含样式`a,b`的`main.css`文件和一个基本上是`c.css`的`chunk-ultra-special-styles.css`。在`splitChunks`选项中，我们指定代码块的名称（就像我们之前使用注释所做的那样），并指定一个正则表达式来匹配应该在单独的代码块/文件中的文件。其他所有事情都由Webpack和`MiniCssExtractPlugin`的神奇处理！

- Alex Michailidis