Webpack 中 CSS 压缩插件

关注

翻译最新推荐文章于 2026-03-04 00:45:39 发布 4.4k 阅读 AI 写同款· GEO 优化 ›

面试知识储备--打包工具篇（webpack和vite）打包之后的代码我们很难看懂，不好调试，我们希望我们可以去调试打包之后的代码，以提高开发体验。SourceMap 会生成xx.map，里面包含源代码和构建后代码每一行的映射关系，浏览器在运行打包后的代码时，如果遇到报错，会去查找对应的 SourceMap 文件，然后把报错位置映射到源代码上，这样就便于我们进行调试了。浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或者更新，都需要浏览器去下载新的代码，最方便和最简单的更新方式就是引入新的文件名称。阅读详情

Optimize CSS Assets Webpack Plugin

一个优化\减少CSS资源的Webpack插件。

该插件有什么作用？

它将在Webpack构建期间搜索CSS资源，并将优化\最小化CSS（默认情况下，它使用cssnano，但可以指定自定义CSS处理器）。
解决了extract-text-webpack-plugin CSS重复问题：
由于extract-text-webpack-plugin仅捆绑（合并）文本块，如果它用于捆绑CSS，则捆绑包可能具有重复的条目（块可以是重复的，但是当合并时，可以创建重复的CSS）。

安装：

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

注意：对于webpack v3或更低版本，请使用optimize-css-assets-webpack-plugin@3.2.0。 optimize-css-assets-webpack-plugin@4.0.0及以上版本支持webpack v4。

参数：

该插件可以接收以下选项（所有这些都是可选的）：

assetNameRegExp：一个正则表达式，指示应优化\最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g
cssProcessor：用于优化\最小化CSS的CSS处理器，默认为cssnano。这应该是一个跟随cssnano.process接口的函数（接收CSS和选项参数并返回一个Promise）。
cssProcessorOptions：传递给cssProcessor的选项，默认为{}
canPrint：一个布尔值，指示插件是否可以将消息打印到控制台，默认为true

实例：

var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css'),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.optimize\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
      canPrint: true
    })
  ]
};

原文地址： https://www.npmjs.com/package/optimize-css-assets-webpack-plugin

收录于