webpack中CSS3添加前缀

CSS3添加前缀

autoprefixer插件是CSS后置处理器，需要等代码生成后，再添加前缀。Less，Sass是预处理器，在代码编译前处理。根据can i use网站获取兼容性，和postCSS一起使用

cnpm i postcss-loader autoprefixer -D

webpack.prod.js

{
    test:/.less$/,
    use:[
              MiniCssExtractPlugin.loader,
              'css-loader',
              'less-loader',
              'postcss-loader'
          ]
}

新增postcss.config.js

module.exports = {
    plugins: [
      require('autoprefixer')({
        browsers:['last 2 version','>1%','ios 7']
      })
    ]
  }

执行结果

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