在Webpack 5中如何正确提取并压缩CSS代码？-css教程-PHP中文网

在webpack 5中，正确提取并压缩css代码需要组合使用 minicssextractplugin 进行提取和 css-minimizer-webpack-plugin 进行压缩。具体做法是在 module.rules 中将 style-loader 替换为 minicssextractplugin.loader，并在 optimization.minimizer 中配置 css 压缩器。这样做会将所有 css 从 js bundle 中分离出来，生成独立的 .css 文件并进行最小化处理。

在Webpack 5中如何正确提取并压缩CSS代码？

如何配置 MiniCssExtractPlugin 以替代 style-loader？

要替代 style-loader，需要在 webpack 配置文件的 module.rules 中找到处理 CSS 的规则，将 use 数组中的 style-loader 移除，并添加 MiniCssExtractPlugin.loader。这确保了 CSS 被提取到单独的文件中而不是注入到 DOM 中。

在Webpack 5中如何正确提取并压缩CSS代码？

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'], // 移除了 style-loader
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
};

如何集成 css-minimizer-webpack-plugin 实现压缩？

为了压缩提取出的 CSS，需要安装 css-minimizer-webpack-plugin 并在 optimization.minimizer 中添加一个实例。该插件会接管 CSS 文件的压缩过程，通常与 TerserPlugin 并行工作，确保 JS 和 CSS 都被优化。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

在Webpack 5中如何正确提取并压缩CSS代码？

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

module.exports = {
  // ... 其他配置 ...
  optimization: {
    minimizer: [
      `...`, // 保留默认的 JS 压缩器 (TerserPlugin)
      new CssMinimizerPlugin(),
    ],
  },
};

当 CSS 文件中包含未使用的样式时，Tree Shaking 是否生效？

默认情况下，MiniCssExtractPlugin 和 css-minimizer-webpack-plugin 不会自动删除未使用的 CSS（即 Tree Shaking）。要实现这一点，通常需要配合 purgecss-webpack-plugin 或使用构建工具如 Vite/Tailwind 的内置机制。在纯 Webpack 5 环境中，如果不引入额外的 PurgeCSS 插件，所有导入的 CSS 都会被打包进最终文件，无论其是否被组件实际引用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！