webpack - Webpack extract-text-webpack-plugin 和 css-loader 缩小

Question

我在最小化 extract-text-webpack-plugin 输出的 css 文件时遇到问题

/* webpack.config.js */
...
loader: [{test: /\.css$/, loader: ExtractTextPlugin.extract('css?minimize')}]
...
plugins: [new ExtractTextPlugin("styles.css")]
...

/* test.js */
require('./file1.css')

/* file1.css */
@import './file2.css';
body {color: green;}
body {font-size: 1rem;}

/* file2.css */
body {border: 1px solid;}
body {background: purple;}

/* the output styles.css */
body{color:green;font-size:1rem}body{border:1px solid;background:purple}

在生成的 styles.css 中，有 2 个 body 标签。似乎缩小是在一个文件内（在 file1.css 和 file2.css 内）执行的，但不是在将两个文件组合并提取到最终的 styles.css 中时执行的。

如何对最终的 style.css 进行缩小？所以输出是

body{color:green;font-size:1rem;border:1px solid;background:purple}

Answer 1

您可以使用optimize-css-assets-webpack-plugin，它是为解决这个确切问题而创建的。

plugins: [
    new ExtractTextPlugin("styles.css"),
    new OptimizeCssAssetsPlugin()
]

Answer 2

对于 css 缩小，您可以使用带有“最小化”选项的 webpack 的 CSS-loader。它解决了我的问题：

webpack.config.js

...
module: {
   rules: [
      {
         test: /\.css$/,
         use: [{
            loader: "css-loader",
            options: {
               minimize: true
            }
         }
      },
   ]
},
...

Answer 3

Paul 的回答已停止使用 1.0.0 Minimize 中的重大更改，并且已从选项中删除了一些其他选项。

推荐的解决方案是使用optimize-cssnano-plugin。这个插件比优化-css-assets-webpack-plugin 更适用于源映射。

例子：

plugins: [
    new ExtractTextPlugin("styles.css"),
    new OptimizeCssnanoPlugin({
        sourceMap: nextSourceMap,
        cssnanoOptions: {
        preset: ['default', {
            discardComments: {
            removeAll: true,
            },
        }],
        },
    }),
]