css兼容性处理，我们需要两个包

    postcss-loader

    postcss-preset-env

    配置 webpack.config.js
    相关配置项可前往 webpack 官网查看， webpack4 于 webpack5 有差别
    https://webpack.js.org/loaders/postcss-loader/#root

    1. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    2. module.exports = {
    3.   module: {
    4.     rules: [
    5.       {
    6.         test: /\.css$/,
    7.         use: [
    8.           MiniCssExtractPlugin.loader,
    9.           'css-loader',
    10.           {
    11.             loader: "postcss-loader",
    12.             options: {
    13.               postcssOptions: {
    14.                 plugins: [
    15.                   [
    16.                     "postcss-preset-env"
    17.                   ]
    18.                 ]
    19.               }
    20.             }
    21.           }
    22.         ]
    23.       }
    24.     ]
    25.   },
    26.   plugins: [
    27.     new MiniCssExtractPlugin({
    28.       filename: 'css/built.css'
    29.     })
    30.   ],
    31. }

    Autoprefixer 插件
    比如有时候我们的部分浏览器不支持css3的display: flex 属性，那么我们就需要在此属性前添加对应的前缀来兼容。这个时候我们就可以使用Autoprefixer 插件配合postcss来完成。

    安装Autoprefixer 插件

    npm install autoprefixer -D

    创建 postcss.config.js 文件

    // postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

    同时在webpack.config.js 配置相关loader

    // webpack.config.js

module.exports = {
  module: {
    rules:[
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
  }
}

    我们还需要在 package.json 约定浏览器版本

    // package.json

{
  "browserslist": [
    "> 1%", // 支持的浏览器为全球使用率在1%以上的浏览器
    "last 2 version" // 浏览器版本为最新的2个版本
  ]
}

    最终效果显示
    image.png