webpack之自动补齐css前缀，增强项目兼容性（postcss-loader autoprefixer）

通过 postcss-loader 和 autoprefixer 两款插件实现

1、安装两款插件

npm i postcss-loader autoprefixer -D

2、在webpack.prod.js中加入以下配置

            {
                test: /.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [
                                require('autoprefixer') ({
                                    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 处理产生冲突的。

其中css-loader和less-loader分别是转化css和less所用，主要区别在于以下部分：

                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [
                                require('autoprefixer') ({
                                    overrideBrowserslist: ['last 2 version', '>1%', 'ios 7']
                                })
                            ]
                        }
                    }

last 2 version为兼容浏览器最后两个版本。

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

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