5、postcss-loader 自动补齐浏览器前缀

在webpack@4中配置如下：

步骤：

1、把插件下载到开发依赖中，

    npm i postcss-loader@3.0.0 postcss@8.3.6 autoprefixer@8.6.5 -D

2、在 webpack.config.js 配置 module

    module: {

        rules: [{

            test: /\.css$/,   

            use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']

        }]

    }

3、创建 postcss.config.js 文件

    module.exports = {

        plugins: [

            require（‘autoprefixer’）()

        ]

    }

4、在 package.json 文件中(这是一种配置postcss-loader的一种方式)

     "browserslist": [

        "defaults",

        "not ie < 11",

        "last 2 versions",

        "> 1%",

        "iOS 7",

        "last 3 iOS versions"

    ]

5、编译代码就可以了

有时下载插件不注意版本的话，会报如下错误！！！

错误信息：PostCSS plugin autoprefixer requires PostCSS 8

报错原因：autoprefixer版本过高

解决办法：1）降低 autoprefixer 版本

                 2） 执行命令： npm install autoprefixer@8 --save0dev || npm i autoprefixer@8 -D

                  ☆注意：如果直接执行 npm i autoprefixer -D 命令的话会，会直接下载最新版本的包，而最新版本上只在webpack 最新版本上使用

                   ☆测试版本：

                        webpack V4.46.0 

                        webpack-cli V3.3.12

                        autoprefixer V8.6.5

                 3） 重新打包即可！

GitHub (postcss-loader) 传送门：https://github.com/webpack-contrib/postcss-loader#readme

NPM (postcss-loader) 传送门：https://www.npmjs.com/package/postcss-loader

就这样子，欢迎指正~