javascript - 从 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 吗？

Answer 1

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

根据我的需要，我需要提取 CSS，然后提供缩小版和非缩小版。所以我遇到了同样的问题，我可以将它缩小或不缩小，但不能同时缩小。

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

默认情况下，此插件使用 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 } }
  })
]