postcss自动补齐前缀

通过 postcss-loader 和 autoprefixer 两款插件实现自动补齐 css 前缀，增强项目兼容性。

安装

1	npm i postcss-loader autoprefixer -D

配置

// webpack.prod.js
 {
            test: /.less$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'less-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: () => [
                            require('autoprefixer') ({
                                // last 2 version为兼容浏览器最后两个版本。
                                overrideBrowserslist: ['last 2 version', '>1%', 'ios 7']
                            })
                        ]
                    }
                }
            ]
    },

postcss-loader 执行顺序必须保证在 css-loader 之前，建议还是放在 less或者 sass 等预处理器之后更好。即 loader 顺序：
less-loader -> postcss-loader -> css-loader -> style-loader 或者 MiniCssExtractPlugin.loader。其实 postcss-loader 放在 less-loader 之前问题也不大，平时使用的 less 里面的语法基本不会和 autoprefixer 处理产生冲突的。

结果

以下是经过插件处理后的样式，display: flex被自动加上多个前缀：

.search-text{
	font-size: 20px;
	color: red;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex；
}