Webpack 网页包提取文本网页包插件和css加载器缩小

我在最小化提取文本网页包插件输出的css文件时遇到问题

/*webpack.config.js*/
...
加载器：[{test:/\.css$/，加载器：ExtractTextPlugin.extract（'css？minimize'）}]
...
插件：[新ExtractTextPlugin（“styles.css”）]
...
/*test.js*/
需要（“./file1.css”）

/*file1.css*/
@导入“/file2.css”；
正文{颜色：绿色；}
正文{font size:1rem；}
/*file2.css*/
正文{边框：1px实心；}
正文{背景：紫色；}
/*输出styles.css*/
正文{颜色：绿色；字体大小：1rem}正文{边框：1px实心；背景：紫色}

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

如何在final style.css上执行缩小？所以输出是

body{颜色：绿色；字体大小：1rem；边框：1px实心；背景：紫色}

您可以使用，它的创建正是为了解决这个问题

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

---

对于css缩小，您可以使用带有“最小化”选项的网页包css加载器。它解决了我的问题：

webpack.config.js

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

---

Paul的答案已经不再适用于1.0.0中的破坏性更改，并且从选项中删除了一些其他选项

建议的解决方案是使用。与优化css资产webpack插件相比，该插件在源地图上工作得更好

例如：

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

---

将在webpack之后使用

cssnano

standalone进行测试。如果相等的话，我想这将是最好的答案，我会给你奖金。谢谢你的信息。出于好奇，这个项目是4天前创建的（供参考，2016年1月8日），你是怎么发现的？我用谷歌搜索了这个问题，奇怪的是，这个项目出现在谷歌的第一页。我必须使用正确的关键字集：）我可以确认这与在生成的

bundle.css

文件上运行

cssnano

的净结果相同。。。但直接在网页包内。这是个好消息！赏金奖励。它应该与sourceMap选项一起使用吗？因为对我来说，

优化css资产网页包插件

和

cssnano

打破源代码映射-当我使用第一个时，所有规则都指向编译的.css文件，而不是.scss源文件，当我使用

cssnano

规则指向源文件，但总是指向文件的末尾。太棒了！！非常感谢！！：）这帮我解决了！也许是一个更简单的解决方案，而不是安装另一个插件。截至2019年5月，css loader没有这样的选项。