如何压缩Webpack打包输出JS文件中的内联CSS？

1. 安装必要依赖 #

首先安装所需的loader和压缩工具：

npm install --save-dev css-loader postcss-loader postcss cssnano css-minimizer-webpack-plugin

2. 配置PostCSS（创建postcss.config.js） #

在项目根目录创建PostCSS配置文件，用cssnano实现CSS压缩：

module.exports = {
  plugins: [
    require('cssnano')({
      preset: 'default', // 采用默认压缩规则，可根据需求自定义调整
    }),
  ],
};

3. 修改Webpack配置 #

更新Webpack配置的module.rules和optimization部分，确保CSS在loader阶段就完成压缩，同时优化打包后内联在JS中的CSS字符串：

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

module.exports = {
  // ... 其他Webpack基础配置（entry、output等）
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        exclude: path.resolve(__dirname, "./src/index.html")
      },
      {
        test: /\.css$/i,
        exclude: /node_modules/,
        use: [
          {
            loader: 'css-loader',
            options: {
              modules: true, // 从你的打包输出看使用了CSS Modules，保持开启；无需则设为false
              esModule: false, // 确保CSS以普通字符串形式导出，适配Web Components注入场景
            },
          },
          'postcss-loader', // 引入postcss-loader处理压缩
        ],
      },
    ],
  },
  optimization: {
    minimizer: [
      `...`, // 保留默认JS压缩器（terser-webpack-plugin）
      new CssMinimizerPlugin(), // 对嵌入JS的CSS字符串做二次优化
    ],
  },
};

关键说明 #

• postcss-loader + cssnano：在CSS被转换为字符串的loader处理阶段，直接剔除空格、换行、注释，同时合并重复规则、简化属性值（比如solid 1px black会被简化为1px solid #000）。
• css-loader的esModule设置：关闭ES模块导出模式，确保CSS以原始字符串形式被导入，方便直接注入到Web Component的shadow DOM中。
• CssMinimizerPlugin：作为Webpack优化阶段的补充，保证CSS字符串嵌入JS后仍能被进一步压缩优化。

验证效果 #

配置完成后重新打包，内联在JS中的CSS会变成类似这样的压缩格式：

c.push([e.id,"#h2puIrptVrtsTvV8FGBM{width:40%;min-width:614px;border:1px solid #000}#eKOgREy00yPONhrgY8Zg{font-weight:700}"])

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