9、css兼容性处理

npm i -D postcss  postcss-preset-env

#box2 {
    background-color: brown;
    height: 50px;
    width:50px;
    display: flex;
    backface-visibility: hidden;
}

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          ‘css-loader‘,
          // 使用loader的默认配置
          // ‘postcss-loader‘,
          // 修改loader的配置
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env"
                  ],
                ],
              },
            },
          }
        ]
      }
    ]
  },

"browserslist": {
    "development": [
      "last 1 chrome version",//兼容最近的谷歌浏览器
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.01%",//兼容>0.01%
      "not dead",//不用管弃用的浏览器
      "not op_mini all"//不用op
    ]
  }