4. css资源加载 loader 解析器

加载css资源（loader的使用）

1. 前言：

• 我们需要知道的一个前提是：webpack默认只认识js或者json文件，其他的资源webpack不认识

2. 尝试加载一个css

• 创建一个index.css文件

• 在index.js文件中加载

• 我们尝试打包，报错了~

• ERROR in ./src/css/index.css 1:4
  
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
  1
  2
  3

3. 安装css-loader

• npm install --save-dev css-loader
  1

• 配置文件添加配置：

• module: {
    // 让webpack认识css文件
    rules: [{
      test: /\.css$/, 
      use: [
        'css-loader'
      ]
    }]
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9

• 这样只帮我们让webpack认识了css文件，引入时不会报错，但是页面样式好像没有生效，原因是webpack 帮我们把css文件打包到js文件中了，没有放入到style标签内的css代码是不会生效的，所以我还需要一个loader帮我们让它生效

安装style-loader（向html传入style标签）

• npm install --save-dev style-loader
  1

• 配置文件添加配置：

• module: {
    // 多个loader的使用顺序是从后往前的
    rules: [{
      test: /\.css$/, 
      // 正常写法的简写形式（不使用options的时候）
      use: [
        'style-loader',
        'css-loader'
      ]
      // 正常写法
      use: [{
              loader: 'style-loader'，
      		options: { ... }
            },
            {
              loader: 'css-loader'
            }
          ]
    }]
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20

4. 单独提取css文件(需要配合 html-webpack-plugin 来使用)

• 原因是，它不能帮我们自动引入

• 安装插件

• npm install --save-dev mini-css-extract-plugin
  1

• 使用（替代原本的style-loader）

• const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  
  module.exports = {
    // 插件中引入
    plugins: [new MiniCssExtractPlugin({
      filename: 'static/css/main.css' // 指定输出目录
    })],
    module: {
      rules: [
        {
          test: /\.css$/i,
          // 在css-loader之后调用 MiniCssExtractPlugin.loader
          use: [MiniCssExtractPlugin.loader, "css-loader"],
        },
      ],
    },
  };
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17

5. css 样式的兼容性处理

• 依赖下载

• npm install postcss-loader postcss postcss-preset-env -D
  1

• 修改配置项（需要在css-loader之前处理兼容性）

• {
    loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: [
            'postcss-preset-env', // 可以解决大多数样式兼容性问题
          ]
        }
      }
            }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

• 创建.browserslistrc文件(取约束条件的交集)

• last 20 version // 支持浏览器最近的哪些版本
  > 5% // 支持市面上使用占比大于这个数值的浏览器
  1
  2

6. css压缩

• 依赖下载

• npm install css-minimizer-webpack-plugin --save-dev
  1

• 配置插件,方法1

• const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
  optimization: {
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
      new CssMinimizerPlugin(),
    ],
  },
  1
  2
  3
  4
  5
  6
  7

• 配置插件,方法2

• const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
  
  ...
  plugins: [new CssMinimizerPlugin()],
  1
  2
  3
  4