webpack--处理css的兼容性

前言：因为css3样式需要加不同的浏览器前缀才能兼容对应的浏览器，因此在项目打包编译的时候，需要对css3属性进行统一的处理。

实现方式

//webpack.config.js
rules：[
 {
                test: /\.less/,
                use: [
                    // 'style-loader',
                    // 将css文件转换成commonjs的模块
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    // 处理css兼容性
                    {
                        loader:'postcss-loader',
                        options:{
                            //webpack4写法
                            // ident:'postcss',
                            // plugins: () => [
                            //     // postcss的插件
                            //     require('postcss-preset-env')()
                            // ]
                            //webpack5写法
                            postcssOptions:{
                                plugins:[
                                    ['postcss-preset-env']
                                ]
                            }
                           
                        }
                    },
                    // 将less转换成css
                    'less-loader',
                ]
            }
]
//package.json
//根据项目情况配置
"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
//或者
 "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.1%",
      "not dead",
      "not op_mini all"
    ]
  }
 
 

webpack5参考链接：postcss-loader | webpack 中文文档

注意：不同webpack版本的写法不同。