如何通过Webpack仅为生产环境生成压缩CSS文件

要实现开发环境输出未压缩且带Source Map的CSS，生产环境输出压缩的.min.css，可以通过分离环境配置+针对性插件配置来实现，步骤如下：

1. 安装额外依赖 #

需要安装生产环境专用的CSS压缩插件：

npm install css-minimizer-webpack-plugin --save-dev

如果想让配置更简洁，可安装webpack-merge来合并基础配置（可选）：

npm install webpack-merge --save-dev

2. 拆分Webpack配置文件 #

我们创建3个配置文件，抽离公共逻辑，单独编写环境特有的配置：

2.1 基础配置：webpack.common.js #

存放开发、生产环境共用的配置：

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

module.exports = {
  entry: {
    index: "./assets/scss/index.scss",
  },
  output: {
    path: path.resolve(__dirname, 'assets'),
    clean: true, // Webpack 5内置功能，替代RemovePlugin自动清空输出目录
  },
  module: {
    rules: [
      {
        test: /\.scss$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      }
    ]
  },
};

2.2 开发环境配置：webpack.dev.js #

配置未压缩CSS和Source Map，方便调试：

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = merge(common, {
  mode: 'development',
  devtool: 'source-map', // 生成完整Source Map，可映射到SCSS源码
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].css", // 输出未压缩的index.css
    }),
  ],
  optimization: {
    minimize: false, // 强制关闭资源压缩
  }
});

说明：

• mode: 'development'会保留代码注释、禁用默认压缩，适配开发场景
• devtool: 'source-map'让浏览器调试时能直接看到SCSS原文件，提升调试效率

2.3 生产环境配置：webpack.prod.js #

配置压缩CSS并输出.min.css：

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = merge(common, {
  mode: 'production',
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].min.css", // 输出压缩后的index.min.css
    }),
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin(), // 专门压缩CSS，去除冗余代码和注释
    ],
  }
});

说明：

• mode: 'production'启用生产模式，默认优化JS代码，配合CssMinimizerPlugin完成CSS压缩
• 文件名改为[name].min.css，明确区分生产环境的压缩资源

3. 配置构建命令 #

在package.json中添加对应脚本：

{
  "scripts": {
    "build:dev": "webpack --config webpack.dev.js",
    "build:prod": "webpack --config webpack.prod.js"
  }
}

• 执行npm run build:dev：生成assets/css/index.css（未压缩+Source Map）
• 执行npm run build:prod：生成assets/css/index.min.css（压缩版）

替代方案：单文件配置（无需webpack-merge） #

如果不想拆分配置文件，可通过环境变量判断逻辑：

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  mode: isProduction ? 'production' : 'development',
  devtool: isProduction ? false : 'source-map',
  entry: {
    index: "./assets/scss/index.scss",
  },
  output: {
    path: path.resolve(__dirname, 'assets'),
    clean: true,
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: `css/[name].${isProduction ? 'min.css' : 'css'}`,
    }),
  ],
  module: {
    rules: [
      {
        test: /\.scss$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      }
    ]
  },
  optimization: {
    minimize: isProduction,
    minimizer: isProduction ? [new CssMinimizerPlugin()] : [],
  }
};

然后修改package.json脚本（Windows系统需用set NODE_ENV=xxx，或安装cross-env实现跨平台兼容）：

{
  "scripts": {
    "build:dev": "NODE_ENV=development webpack",
    "build:prod": "NODE_ENV=production webpack"
  }
}

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