从webpack的ExtractTextPlugin和style-loader中压缩CSS

Question

在这个跟踪库中：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`吗？

- Civilian

Answer 1

所以，除非你明确禁用了它，否则这将通过CSS加载器自动完成。由于你在问问题，我假设这意味着你已经这样做了。如果你正在提取而不是缩小代码，那么UglifyJsPlugin本身不会缩小CSS。

对于我的需求，我需要提取CSS并提供一个缩小和未缩小的版本。所以我遇到了同样的问题，我可以让它被缩小或未缩小，但不能同时存在。

我使用 Webpack 的optimize-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 } }
  })
]

- Albert Martin

---

@Civilian，您介意把这个答案改正一下吗？ - Nicholas

Answer 2

我建议看一下postcss和postcss-loader。这样，一旦设置好了，您可以在没有经过几天与webpack的斗争的情况下对CSS/SCSS进行许多酷炫的操作。

- David Bradshaw

Answer 3

为UglifyJsPlugin添加一个条目对我来说是有效的。

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

- ify.io

---

UglifyJsPlugin 只压缩 JavaScript。问题是关于压缩 CSS 的。 - vangorra