webpack4配置vue项目----10.css样式前缀自动补

这是一篇webpack4配置的系列文章，推荐从头开始看起
1.初始化
2.关于执行环境process.env.NODE_ENV
3.设置mode和sourceMap
4.加载css, scss文件，以及样式抽离
5.加载图片等文件
6.html-webpack-plugin插件
7.单vue文件的加载，以及babel的使用
8.配置devServer服务器，热更新，前端跨域代理
9.设置目录别名
10.css样式前缀自动补全
11.public公共静态资源目录拷贝
12.清理dist目录

安装依赖

npm install --save-dev postcss-loader autoprefixer

webpack.config.js添加postcss的相关配置

module.exports = {
    module: {
        rules: [ {
            test: /\.css$/,
            use: [
                //开发环境使用style-loader打包
                process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
                'css-loader',
                { //postcss-loader插件，用于自动补全样式的浏览器前缀
                    loader: 'postcss-loader',
                    options: {
                        plugins: [require('autoprefixer')({
                            browsers: [ //浏览器列表
                                'ie>=8',
                                'Firefox>=20',
                                'Safari>=5',
                                'Android>=4',
                                'Ios>=6',
                                'last 4 version',
                            ]
                        })]
                    }
                }
            ]
        }]
    },
    
};