从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,然后提供缩小版和非缩小版.所以我遇到了同样的问题,我可以将它缩小或缩小,但不是两者兼而有之.

我能够使用针对Webpack 的optimize-css-assets插件来实现这一点.它将允许您缩小您使用的CSS提取,ExtractTextPlugin并且您可以设置类似于设置的RegEx规则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 } }
  })
]

Answer 2

我建议看看postcss和postcss-loader.这样一旦你完成它设置,你可以为CSS/SCSS做很多很酷的事情,而不必花费数天时间与webpack作斗争.