Css 抽离和压缩

提取css资源

使用插件mini-css-extract-plugin

1. 需要使用MiniCssExtractPlugin.loader 处理css 资源
2. MiniCssExtractPlugin 导出

   按引用提取

   const path = require("path");
   const MiniCssExtractPlugin = require("mini-css-extract-plugin");
   module.exports = {
   target: "web",
   mode: "development",
   entry: "./src/index.js",
   output: {
    filename: "build.js",
    path: path.resolve(__dirname, "dist"),
   },
   module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader,, "css-loader"],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,,
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              // Prefer `dart-sass`
              implementation: require("sass"),
            },
          },
        ],
      },
    ],
   },
   plugins: [
    new htmlWebpackPlugin({
      template: "publish/index.html",
    }),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({ filename: "index.css" }),
   ],
   };

   提取所有的 CSS 到一个文件中

   用过使用 optimization.splitChunks.cacheGroups 选项，所有的 CSS 可以被提取到一个 CSS 文件中。 ```typescript const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);

module.exports = { optimization: { splitChunks: { cacheGroups: { styles: { name: “styles”, type: “css/mini-extract”, chunks: “all”, enforce: true, }, }, }, }, plugins: [ new MiniCssExtractPlugin({ filename: “[name].css”, }), ], module: { rules: [ { test: /.css$/, use: [MiniCssExtractPlugin.loader, “css-loader”], }, ], }, };

<a name="P3IL5"></a>
### 基于入口提取 CSS
你可以基于 webpack 的入口名称提取 CSS。 当你使用路由动态加载但是想要通过入口加载对应的 CSS 文件时这将会非常有用。 这样也避免了 ExtractTextPlugin 造成的 CSS 重复复制问题。
```typescript
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  entry: {
    foo: path.resolve(__dirname, "src/foo"),
    bar: path.resolve(__dirname, "src/bar"),
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        fooStyles: {
          type: "css/mini-extract",
          name: "styles_foo",
          chunks: (chunk) => {
            return chunk.name === "foo";
          },
          enforce: true,
        },
        barStyles: {
          type: "css/mini-extract",
          name: "styles_bar",
          chunks: (chunk) => {
            return chunk.name === "bar";
          },
          enforce: true,
        },
      },
    },
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

压缩css资源

压缩静态css资源

使用css-minimizer-plugin
css-minimizer-plugin就是使用cssnano工具来优化压缩css

1. 需要开启minimize
   1. minimize => 告知 webpack 使用 TerserPlugin 或其它在 optimization.minimizer定义的插件压缩 bundle
2. 使用CssMinimizerPlugin ```typescript const MiniCssExtractPlugin = require(“mini-css-extract-plugin”); const CssMinimizerPlugin = require(“css-minimizer-webpack-plugin”);

module.exports = { module: { rules: [ { test: /.s?css$/, use: [MiniCssExtractPlugin.loader, “css-loader”, “sass-loader”], }, ], }, optimization: { minimize:true, minimizer: [ …, new CssMinimizerPlugin(), ], }, };

<a name="Aiioh"></a>
### 压缩Style标签内的 css
使用插件 html-webpack-plugin<br />属性的minify用 html-minifier-terser 压缩html,其属性minifyCss 使用clean-css 压缩style标签内的css
```typescript
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [new HtmlWebpackPlugin({
      template:path.resolce(__dirname,'public/index.html'),
    minify:{
        minifyCSS：true
    }
  })],
};