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']
    })
  ]
}