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样式和一个名为{{1 }}基本上就是chunk-my-special-style.css。如您所知b.css现在是b.css，因此它具有webpack提供的所有功能，例如chunk。

示例3

chunkFilename

// 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', }) ] }配置。顾名思义，我们可以根据某些条件（正则表达式，函数等）创建自己的块。尽管不会异步导入这些文件，但使用这些优化对避免膨胀我们的文件（js或css）非常重要。在此示例中，我们将最终进入dist文件夹，并再次使用一个splitChunks文件，该文件包含main.css样式和a,b，基本上是chunk-ultra-special-styles.css。在c.css选项中，我们指定块的名称（就像我们上面用注释所做的一样）和一个正则表达式，以匹配应位于单独块/文件上的所需文件。其他所有内容都由webpack和MiniCssExtractPlugin的魔术内部处理！

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

1 个答案:

示例1

示例2

示例3