webpack4.x中使用postcss-loader和autoprefixer给css3样式添加浏览器兼容

当前我们在写css样式的时候总是要处理浏览器兼容问题，那就是加前缀问题，可是我们在开发的时候比如：

直接写个：

.className{display: flex;}

想变成下面这种的

.className{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}

以下就是配置方法：

安装

添加浏览器前缀需要下载的插件autoprefixer

npm install --save-dev css-loader style-loader postcss-loader autoprefixer

配置webpack.config.js

{test: /\.css$/,use: [{loader: 'style-loader'},{loader: 'css-loader',options: {modules: true,importLoaders: 1,minimize: true,localIdentName: '[local]_[hash:base64:5]'}},{loader: 'postcss-loader'}}

在项目根目录创建 postcss.config.js

在项目根目录创建 postcss.config.js，并且设置支持哪些浏览器，必须设置支持的浏览器才会自动添加添加浏览器兼容

module.exports = {plugins: [require('autoprefixer')({"browsers": ["defaults","not ie < 11","last 2 versions","> 1%","iOS 7","last 3 iOS versions"]})]};

browsers配置