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文件夹中获得一个main.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，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的魔术内部处理！