Css Style

处理样式资源

以scss 为例

需要的依赖

• style-loader
• css-loader
• postcss-loader
• sass-loader

下载loader

yarn add style-loader css-loader  sass-loader sass  -D

webpack.config.js

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader", 
          "css-loader",
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
          },
        ],
      },
    ],
  },

css的兼容性

需要的依赖

1. postcss-loader
2. posctcss
3. pocstcss-preset-env

   yarn add  posctcss-loader  postcss postcss-preset-env -D

   postcss.config.js

   module.exports = {
   plugins: ['postcss-preset-env'],
   };

   .browserslistsrc

   ```javascript

last 2 version

1% IE 10 # sorry

<a name="C6bsf"></a>
### webpapck.config.js
```typescript
module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader", 
          "css-loader",
          "postcss-loader"
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          "postcss-loader"
          {
            loader: "sass-loader",
            options: {
              // Prefer `dart-sass`
              implementation: require("sass"),
            },
          },
        ],
      },
    ],
  },

资源处理的顺序

注意（importLoaders）

@import './test.css'
.title{
  color:#ffffff;
}

以上代码中test.css的样式并没有触发postcss的兼容
需要使用importLoaders，去再从触发loader

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader", 
          {
                loader:"css-loader",
            options:{
                importLoaders:1
            }
            }, 
          "postcss-loader"
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
           {
                loader:"css-loader",
            options:{
                importLoaders:2
            }
            },
          "postcss-loader"
          {
            loader: "sass-loader",
            options: {
              // Prefer `dart-sass`
              implementation: require("sass"),
            },
          },
        ],
      },
    ],
  },

提取css

需要使用MiniCssExtractPlugin插件

引用提取

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 module: {
    rules: [
      {
        test: /\.css$/,
         use: [
          "style-loader", 
          "css-loader",
          "postcss-loader"
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          {
            loader: "sass-loader",
            options: {
              // Prefer `dart-sass`
              implementation: require("sass"),
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: "index.css" }),
  ],
};

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

用过使用 optimization.splitChunks.cacheGroups 选项，所有的 CSS 可以被提取到一个 CSS 文件中。

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"],
      },
    ],
  },
};

基于入口提取 CSS

你可以基于 webpack 的入口名称提取 CSS。 当你使用路由动态加载但是想要通过入口加载对应的 CSS 文件时这将会非常有用。 这样也避免了 ExtractTextPlugin 造成的 CSS 重复复制问题。

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-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="Y7reN"></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
    }
  })],
};

TreeShaking

安装purgecss-webpack-plugin

const PurgecssWebpackPlugin  =require('purgecss-webpack-plugin ')
const glob = require('glob')
plugins:[
    new PurgecssWebpackPlugin({
        paths: glob.sync(`${path.resolve('./src')}/**/*`, { nodir: true }),
        safelist:function(){
            return {
                standard:["body","html"]
            }
        }
    })
]