Minify css из webpack ExtractTextPlugin и стиль-загрузчик

В этом реестре tracer: https://github.com/pconerly/libsass-spritesmith-webpack-tracer

И эта строка: https://github.com/pconerly/libsass-spritesmith-webpack-tracer/blob/master/webpack.config.js#L82

Я загружаю .scss и извлекаю их в открытый текст. Я также хотел бы уменьшить them---, как мне это сделать? style-loader, похоже, нет возможности для этого. Должен ли я использовать другой плагин, например css-loader?

Ответ 1

Таким образом, это произойдет автоматически через загрузчик CSS, если вы явно не отключили его. Поскольку вы задаете вопрос, который я предполагаю, это означает, что у вас есть. UglifyJsPlugin не будет UglifyJsPlugin CSS самостоятельно, если вы извлекаете и не минимизируете.

Для моих нужд мне нужно было извлечь CSS, а затем предоставить как уменьшенную, так и не уменьшенную версию. Таким образом, я столкнулся с той же проблемой, где я мог бы ее минимизировать или не минимизировать, но не оба.

Я смог заставить это работать, используя плагин optimize-css-assets для Webpack. Это позволит вам ExtractTextPlugin извлеченный CSS с помощью ExtractTextPlugin и вы можете установить правило UglifyJsPlugin настройкам 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 } }
  })
]

Ответ 2

Я бы предложил посмотреть на postcss и postcss-loader. Таким образом, как только вы его настроите, вы можете сделать много классных вещей для вас CSS/SCSS, не тратя время на борьбу с webpack.

Ответ 3

Добавление записи для UglifyJsPlugin работает для меня.

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