从 webpack 的 ExtractTextPlugin 和 style-loader 中缩小 css

Minify css from webpack's ExtractTextPlugin and style-loader

本文关键字：缩小 css style-loader webpack ExtractTextPlugin      更新时间：2023-09-26

在此跟踪器存储库中：https://github.com/pconerly/libsass-spritesmith-webpack-tracer

还有这一行：https://github.com/pconerly/libsass-spritesmith-webpack-tracer/blob/master/webpack.config.js#L82

我正在加载.scss，并将它们提取为明文。我还想缩小它们---我该怎么做？ style-loader似乎没有选择。 我应该使用另一个像css-loader这样的插件吗？

因此，

除非您明确禁用它，否则这将自动通过CSS加载器进行。既然你问这个问题，我假设这意味着你有。如果您正在提取而不是缩小，UglifyJsPlugin不会自行缩小 CSS。

为了满足我的需求，我需要提取 CSS，然后提供缩小和非缩小版本。所以我遇到了同样的问题，我可以将其缩小或非缩小，但不能两者兼而有之。

我能够使用 Webpack 的优化 css-assets 插件来让它工作。它将允许您缩小使用ExtractTextPlugin提取的 CSS，并且可以设置类似于UglifyJsPlugin设置的正则表达式规则。

默认情况下，此插件使用 css-nano 模块进行压缩，尽管您可以根据需要换出到您喜欢的模块。

下面是一个基本配置：

plugins: [
  new ExtractTextPlugin('[name].css'),
  new webpack.optimize.UglifyJsPlugin({
    compress: { warnings: false },
    include: /'.min'.js$/
  }),
  new OptimizeCssAssetsPlugin({
    assetNameRegExp: /'.min'.css$/,
    cssProcessorOptions: { discardComments: { removeAll: true } }
  })
]

我建议查看postcss和postcss-loader。这样，一旦你设置好了它，你就可以对你的CSS/SCSS做很多很酷的事情，而不必花几天时间先与webpack作斗争。

为UglifyJsPlugin添加一个条目对我有用。

plugins: [
    new ExtractTextPlugin("[name].css"),
    new webpack.optimize.UglifyJsPlugin({
        compressor: { warnings: false }
    })
]
相关文章：