如何在Webpack中对整个CSS bundle而非单个文件使用postcss-loader？

要实现对整个打包后的CSS bundle应用PostCSS，而不是逐个处理单个.css文件，我们需要调整Webpack配置的结构，把PostCSS处理从单个文件的loader链条中移出来，改为在CSS提取完成后对整个bundle进行批量处理。下面是具体实现步骤：

1. 调整原有的CSS Loader配置 #

首先，我们需要修改原来的module.rules，移除postcss-loader（因为不再需要它处理单个文件），并把css-loader的importLoaders改为0（因为没有前置loader需要执行了）：

{
  test: /\.css$/,
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: "css-loader",
      options: {
        modules: true,
        localIdentName: "[name]-[local]_[hash:base64:5]",
        imports: true,
        importLoaders: 0 // 移除postcss-loader后，这里改为0
      }
    }
  ]
}

2. 编写自定义Webpack插件处理整个CSS Bundle #

我们需要创建一个自定义插件，在Webpack的emit阶段（也就是资源即将写入磁盘之前）捕获生成的CSS bundle，用PostCSS处理整个文件，再替换回编译资源中。

首先确保你已经安装了postcss和所需的PostCSS插件（比如autoprefixer、tailwindcss等）：

npm install postcss autoprefixer --save-dev

然后编写插件代码：

const postcss = require('postcss');
// 导入你需要的PostCSS插件，示例用autoprefixer
const autoprefixer = require('autoprefixer');

class PostCSSBundlePlugin {
  constructor(postcssConfig = {}) {
    this.postcssPlugins = postcssConfig.plugins || [];
    this.processOptions = postcssConfig.processOptions || {};
  }

  apply(compiler) {
    // 在emit阶段触发插件逻辑
    compiler.hooks.emit.tapAsync('PostCSSBundlePlugin', (compilation, done) => {
      // 遍历所有生成的资源，筛选出CSS文件
      Object.keys(compilation.assets).forEach(assetName => {
        if (!assetName.endsWith('.css')) return;

        const originalAsset = compilation.assets[assetName];
        const cssContent = originalAsset.source();

        // 使用PostCSS处理整个CSS bundle
        postcss(this.postcssPlugins)
          .process(cssContent, {
            from: assetName,
            to: assetName,
            ...this.processOptions
          })
          .then(processedResult => {
            // 替换为处理后的CSS内容
            compilation.assets[assetName] = {
              source: () => processedResult.css,
              size: () => processedResult.css.length
            };

            // 如果生成了source map，也一并添加到资源中
            if (processedResult.map) {
              const mapAssetName = `${assetName}.map`;
              compilation.assets[mapAssetName] = {
                source: () => processedResult.map.toString(),
                size: () => processedResult.map.toString().length
              };
            }
          })
          .catch(error => {
            // 将错误传递给Webpack，触发编译失败
            compilation.errors.push(new Error(`PostCSS处理失败: ${error.message}`));
          });
      });

      done();
    });
  }
}

3. 在Webpack配置中启用自定义插件 #

最后，把这个自定义插件添加到Webpack的plugins数组中，并配置你的PostCSS插件：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
    // 初始化自定义插件，传入你的PostCSS配置
    new PostCSSBundlePlugin({
      plugins: [
        autoprefixer({ /* 你的autoprefixer配置 */ })
        // 可以添加其他PostCSS插件，比如tailwindcss()
      ],
      processOptions: {
        // 可选：启用source map（需要配合MiniCssExtractPlugin的sourceMap配置）
        map: { inline: false }
      }
    })
  ],
  // 如果需要source map，记得开启devtool
  devtool: 'source-map'
};

原理说明 #

• 原来的配置中，postcss-loader会在css-loader之前逐个处理每个.css文件；现在我们先通过css-loader和MiniCssExtractPlugin把所有CSS合并成bundle。
• 自定义插件在Webpack的emit阶段拦截生成的CSS bundle，用PostCSS一次性处理整个文件，确保所有CSS规则都能被统一处理。

内容的提问来源于stack exchange，提问作者Grundiss