13自动处理CSS3属性前缀

通过postcss-loader给css3加前缀

1. 在终端中安装两个包postcss-loader和autoprefixer

   npm install –save-dev postcss-loader autoprefixer

若安装失败，删除node_modules文件夹，npm install重新安装该文件夹后再重新安装上述两个包
2. 建立一个个webpack-config.js同级的postcss-config.js文件

3. 配置postcss.config.js，引入qutoprefixer插件

```
    module.exports = {
        plugins: [
            require('autoprefixer')
        ]
    }
    //暴露接口
    <br>
```

4. 配置webpack-config.js里面的loader

 module:{
    rules: [
        {
          test: /\.css$/,
          //use: [ 'style-loader', 'css-loader' ]   //use也可以写成loader
          use:extractTextPlugin.extract({
            fallback:'style-loader',
            use:[{
              loader:'css-loader',
              options:{
                importLoaders:1
              }
            },
              'postcss-loader'
            ]
          })
        },{
          test:/\.(png|jpg|gif)/,
          use:[{
            loader:'url-loader',
            options:{
              limit:5000,
              outputPath:'images/'
            }
          }]
        },{
          test:/\.(htm|html)$/i,
          use:['html-withimg-loader']
        },{
          test:/\.less$/,
          use:extractTextPlugin.extract({
            use:[{
              loader:'css-loader'
            },{
              loader:'less-loader'
            }],
            fallback:'style-loader'
          })
        },{
          test:/\.scss$/,
          use:extractTextPlugin.extract({
            use:[{
              loader:'css-loader'
            },{
              loader:'sass-loader'
            }],
            fallback:'style-loader'
          })
        }
      ]
  },

注意：是配置module里面的第一个css,把postcss-loader配置进去，（其他是以前配置的）即:

5. 提取css的loader配置：

use:extractTextPlugin.extract({
    fallback:'style-loader',
    use:[{
      loader:'css-loader',
      options:{
        importLoaders:1
      }
    },
      'postcss-loader'
    ]
 })

6. 删除dist文件夹，webpack重新打包，dist/css/index.css里面的css属性会自动加上CSS3前缀

配置项（github）