webpack插件自动加css3前缀

想要webpack帮忙自动加上“-webkit-”之类的css前缀，我们需要用到postcss-loader和它的插件autoprefixer

1.安装

npm i postcss-loader autoprefixer -D

2.加loader

//...
module:{
    rules:[
      {
        test:/.scss$/,
        use: extractPlugin.extract({
            use:['css-loader?importLoaders=1','postcss-loader','sass-loader'],
            fallback: 'style-loader'
        }),
        exclude: path.resolve(__dirname,'./node_modules')
      }
    ]
}

其实就是css-loader前面插一个postcss-loader

而参数importLoaders=1是为了预防css文件里面再import其他css文件，会使得import进来的不会自动加前缀

3.配置postcss

在webpack.config.js的同级目录下添加postcss.config.js，postcss-loader会自动去读取配置

module.exports = {
  plugins:[
    require('autoprefixer')({
      browsers: ['last 10 versions','Firefox >= 20','Android >= 4.0','iOS >= 8']
    })
  ]
}