Webpack5+TailwindCSS v4构建后CSS冗余未压缩问题求助

问题核心 #

使用Webpack 5搭配TailwindCSS v4构建纯HTML/CSS/JS项目，按官方文档配置后执行npm run build，生成的CSS文件存在大量冗余样式且未压缩，移除sass-loader后问题仍未解决，需在Webpack环境下完成修复。

解决方案步骤 #

1. 修正TailwindCSS配置，启用样式树摇

TailwindCSS v4依赖content配置扫描项目中实际使用的类，未正确配置会生成全量默认样式，这是冗余代码的核心来源。创建或修改tailwind.config.js：

/** @type {import('tailwindcss').Config} */
export default {
  // 扫描项目中所有使用Tailwind类的文件，替换为你的实际文件路径
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

2. 配置Webpack CSS压缩插件

MiniCssExtractPlugin仅负责提取CSS到单独文件，不会自动压缩。需安装并配置专用压缩插件：

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

在webpack.config.js中添加优化配置：

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin'); // 可选，用于同步压缩JS

module.exports = {
  // 其他Webpack配置...
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin(), // 不需要JS压缩可删除此行
      new CssMinimizerPlugin(), // 压缩CSS文件
    ],
  },
};

3. 调整Webpack CSS Loader参数

移除sass-loader后，css-loader的importLoaders参数需匹配实际前置loader数量（当前仅postcss-loader，设为1即可）：

module: {
  rules: [
    {
      test: /\.css$/i,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: "css-loader",
          options: {
            importLoaders: 1, // 对应后续1个前置loader（postcss-loader）
          },
        },
        "postcss-loader",
      ],
    },
  ],
},

4. 确保Webpack运行在生产模式

在package.json的build脚本中明确指定生产模式，Webpack会自动启用基础优化：

"scripts": {
  "build": "webpack --mode production"
}

内容的提问来源于stack exchange，提问作者Sanket P Bhamre