Webpack 4中CSS自动优化与压缩问题：插件还是Loader更合适？

Hey there! 你问的这个问题非常常见——用plugins或者loaders来实现Webpack 4中CSS的优化压缩，完全是正确的方向！我来给你梳理下可行的方案，顺便帮你排查下之前optimize-css-assets-webpack-plugin没生效的可能原因。

Plugins是在Webpack打包的最后阶段对输出文件进行处理，适合统一压缩所有CSS资源。你之前尝试的optimize-css-assets-webpack-plugin是可行的，但大概率是配置方式不对导致没生效，先看正确的配置姿势：

1. 正确配置optimize-css-assets-webpack-plugin #

Webpack 4中，压缩类插件需要放在optimization.minimizer数组中，而不是直接放在plugins数组里。另外，因为Webpack 4默认用terser-webpack-plugin压缩JS，如果你只配置CSS压缩插件，会覆盖默认的JS压缩行为，所以需要同时保留JS压缩插件：

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // 务必确保是生产模式，开发模式下Webpack默认不启用压缩
  mode: 'production',
  // ...其他基础配置
  optimization: {
    minimizer: [
      // 保留JS压缩的默认行为
      new TerserPlugin(),
      new OptimizeCSSAssetsPlugin({
        cssProcessorOptions: {
          map: {
            inline: false, // 不生成内联source map，减小文件体积
            annotation: true // 保留source map注释方便调试
          },
          discardComments: { removeAll: true } // 移除所有CSS注释
        }
      })
    ]
  }
};

常见失效原因排查 #

• 你是不是把插件放在了plugins数组里？Webpack 4要求这类压缩插件必须放在optimization.minimizer中。
• 是不是处于mode: 'development'？开发模式下Webpack会跳过压缩步骤，要么切换到生产模式，要么手动设置optimization.minimize: true。
• 有没有安装依赖？optimize-css-assets-webpack-plugin依赖cssnano做实际压缩，确保两者都已安装：

npm install optimize-css-assets-webpack-plugin cssnano --save-dev

2. 更推荐的官方替代插件：css-minimizer-webpack-plugin #

optimize-css-assets-webpack-plugin的维护活跃度有所下降，Webpack官方更推荐使用css-minimizer-webpack-plugin，配置方式类似：

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimizer: [
      new TerserPlugin(),
      new CssMinimizerPlugin({
        minimizerOptions: {
          preset: [
            'default',
            {
              discardComments: { removeAll: true },
              mergeLonghand: false // 避免某些特殊场景下的样式错乱
            }
          ]
        }
      })
    ]
  }
};

Loaders是在Webpack编译CSS的过程中就对代码进行处理，除了压缩，还能结合其他工具（比如自动补全前缀）做一站式优化，适合需要在编译阶段提前处理CSS的场景。最常用的是postcss-loader配合cssnano：

1. 配置步骤 #

首先安装依赖：

npm install postcss-loader cssnano --save-dev

然后在项目根目录创建postcss.config.js，配置cssnano的压缩规则：

module.exports = {
  plugins: [
    require('cssnano')({
      preset: [
        'default',
        {
          discardComments: { removeAll: true },
          reduceIdents: false // 禁用选择器重命名，避免和JS交互时出现样式失效问题
        }
      ]
    })
  ]
};

最后在Webpack配置中引入postcss-loader：

// 生产环境推荐用mini-css-extract-plugin把CSS抽成单独文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, // 替代style-loader，抽离CSS到单独文件
          'css-loader',
          'postcss-loader' // 放在css-loader之后，处理编译后的CSS
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css' // 加contenthash做缓存优化
    })
  ]
};

两种途径都是完全可行的：

• 如果你只需要最终的CSS压缩，用Plugins的方式更简单直接；
• 如果你需要在编译阶段同时做前缀补全、样式校验等其他优化，Loaders的方式更灵活。

先按照上面的排查步骤检查你之前的optimize-css-assets-webpack-plugin配置，应该就能解决失效的问题啦！

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