我有一个使用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

如图所示，空格、行移甚至注解都保留了下来。
我试过mini-css-extract-plugin，css-minimizer-webpack-plugin，postcss-loader的多种组合，但没有成功，所以如果能提供一个在webpack配置中设置css规则的工作示例，我将非常感激。（如果合适的话，最终的插件/优化设置）
谢谢