如何压缩webpack包中的inline css ?

Question

我有一个使用香草webcomponents的SPA，我正在努力压缩捆绑js webpack输出中的内联css。这是我的webpack配置的模块部分:

module: {
rules: [
{
test: /.html$/i,
loader: "html-loader",
exclude: path.resolve(__dirname, "./src/index.html")
},
{
test: /.css$/i,
exclude: /node_modules/,
loader: 'css-loader'
}
],
}

在我的组件中，我像这样导入css:

import css from "./entityPage.css";

在我的组件css中，例如./entityPage.css我指的是外部的css"这样的

@import "../../style.css";

以下是webpack包输出中内联css的摘录:

c.push([e.id,"#h2puIrptVrtsTvV8FGBM{rn    width: 40%;rn    min-width: 614px; /*48 x the character w with font-size 1rem ;) */rn    border: solid 1px black;rnrn}rnrn#eKOgREy00yPONhrgY8Zg{rn    font-weight: bold;rn

如所见，空格、换行甚至注释都被保留。

我已经尝试了mini-css-extract-plugin, css-minimizer-webpack-plugin, postcss-loader的多种组合，但没有运气，所以在webpack配置中设置css规则的工作示例将非常感激。(如果合适的话，最终的插件/优化设置)

Thx .

Answer 1

查看CSSO (https://github.com/css/csso)。你可以在Webpack中使用它。这里有一些关于如何使用WebPack设置它的文档。

另一种方法是让IDE为您自动编译。

我所做的是在SCSS中编码-当我更改文件时，它将自动编译为CSS。这是在PHPStorm文件监视器中设置的。PHPStorm检测CSS的外部变化(因为它是由SCSS生成的)，它应用Autoprefixer和CSSO优化器来最小化CSS。

我还制作了自己的CLI工具来自动将CSS编译为原生JavaScript模块，以获得更好的性能和更快的编译速度——所以我不需要Webpack来做这些。你可以在这里获得我的CLI工具:https://www.npmjs.com/package/csshtml-module

这应该也可以很好地与Webpack一起工作，因为最终结果是本机JS/TS。你还可以在JS库之外获得SCSS编译和优化的好处。

类似的方法可以在VSCode中完成，也可能在其他IDE中完成。

Answer 2

postcss/postcss-loader在我的环境中是可行的。

webpack。CSS文件的配置模块规则如下所示:

{
test: /.css$/i,
exclude: /node_modules/,
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader'
}
]
}