14

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

参考如下。

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

所以，我的问题是，

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

chunkFilename 的目的是什么？

你怎么能看到文件？

4

1 回答 1

24

在 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 的魔法在内部处理！

于 2019-01-20T19:07:09.437 回答