mini-css-extract-plugin 模块的 chunkFilename 的目的是什么?

问题描述

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

I'm using mini-css-extract-plugin module now, and setting its chunkFilename value and make sure the value of "[id].css" by running it.However, I couldn't see the file.

参考如下.

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

所以，我的问题是，

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

What is the chunkFilename of mini-css-extract-plugin?

chunkFilename 的目的是什么?

What is the purpose of chunkFilename?

如何查看文件?

推荐答案

在 webpack 的术语中，块是一种资产，不应与其他所有内容捆绑在一个文件中，而应以某种方式分开.我猜在你的代码中你没有异步导入你的样式或者有任何特殊的 splitChunks 配置.这指示 webpack 简单地将每个 css 放在一个文件中，因此 chunkFilename 选项保持未使用.

In webpack's terminology a chunk is an asset that should not be bundled with everything else in one file but should be somehow separated. I guess in your code you don't import asynchronously your styles or have any special splitChunks configuration. That instructs webpack to simply put every css in a file, so the chunkFilename option remains unused.

检查下面的一些示例(我知道)可以创建一些块.

Check below some examples (that I am aware of) that can create some chunks.

// 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 在这种情况下仍然未使用.

Here we will simply get in the dist folder a main.css file containing a,b,c styles. chunkFilename remains unused in this scenario.

// 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.

In this setup now, that we use the async import we will end up inside dist folder again with a main.css that now contains only a,c styles and a new file called chunk-my-special-style.css that is basically b.css. As you understand b.css is a chunk now thus it has all the capabilities that webpack provides like 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',
    })
  ]
}

现在在这个设置中，我们使用 splitChunks 配置.顾名思义，我们有能力根据某些条件(正则表达式、函数等...)创建自己的块.虽然这些文件不会被异步导入，但使用这些优化非常重要，以免使我们的文件膨胀，无论是 js 还是 css.在这个例子中，我们将在 dist 文件夹中结束，同样是一个包含 a,b 样式和 chunk-ultra-special-styles 的 main.css 文件.css 基本上就是 c.css.在 splitChunks 选项中，我们指定块的名称(就像我们上面用注释所做的那样)和一个正则表达式来匹配应该在单独的块/文件上的所需文件.其他一切都由 webpack 和 MiniCssExtractPlugin 的魔法在内部处理！

In this setup now, we use the splitChunks configuration. As the name suggests we have the ability to create our own chunks based on some conditions (regex,functions,etc...). Although these files will not be imported asynchronously is very important to use these optimizations in order not to bloat our files, either js or css. In this example we will end up in dist folder, again with a main.css file that contains a,b styles and chunk-ultra-special-styles.css that is basically c.css. Inside the splitChunks option we specify the name of the chunk (like we did above with a comment) and a regular expression to match the desired files that should be on a seperate chunk/file. Everything else is being handled internally by webpack's and MiniCssExtractPlugin's magic!

这篇关于mini-css-extract-plugin 模块的 chunkFilename 的目的是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！