如何压缩 webpack 包中的内联 css答案

【问题标题】：How do I compress inline css in the webpack bundle如何压缩 webpack 包中的内联 css
【发布时间】：2023-02-18 18:44:42
【问题描述】：

我有一个使用 vanilla 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{\r\n    width: 40%;\r\n    min-width: 614px; /*48 x the character w with font-size 1rem ;) */\r\n    border: solid 1px black;\r\n\r\n}\r\n\r\n#eKOgREy00yPONhrgY8Zg{\r\n    font-weight: bold;\r\n

正如所见，空白、换行甚至 cmet 都被保留了下来。

我已经尝试了 mini-css-extract-plugin、css-minimizer-webpack-plugin、postcss-loader 的多种组合，但都没有成功，因此非常感谢在 webpack 配置中设置 css 规则的工作示例。（如果合适的话，使用最终的插件/优化设置）

谢谢。

【问题讨论】：

标签： css webpack optimization

【解决方案1】：

查看 CSSO (https://github.com/css/csso)。您可以将它与 Webpack 一起使用。那里有一些关于如何使用 WebPack 进行设置的文档。

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

我所做的是在 SCSS 中编写代码——当我更改文件时它会自动编译为 CSS。这是在 PHPStorm File Watchers 中设置的。 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 中完成。

【讨论】：

这在我的上下文中不起作用。

【解决方案2】：

postcss / postcss-loader 是在我的上下文中要走的路。

我的 css 文件的 webpack.config 模块规则如下所示：

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

【讨论】：