webpack之autoprefixer自动添加厂商前缀

首先要安装我们需要的loader

npm install style-loader css-loader postcss-loader autoprefixer -D

在webpack.config.js配置loader

  // webpack.config.js
 	 {
        test: /\.css$/,
        use: [
           miniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader'
        ]
      },

在 postcss.config.js中配置postcss

/// plugins设置PostCSS插件 可以是数组，或函数，默认数组
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

以上配置完以后，还需要在package.json配置支持的浏览器

"browserslist": [
    "defaults",
    "not ie <= 8",
    "last 2 versions",
    "> 1%",
    "iOS >= 7",
    "Android >= 4.0"
  ]

或者直接在postcss.config.js文件里设置浏览器支持

module.exports = {
  plugins: [
    require('autoprefixer')({
      browsers: ['Android >= 4.0', 'iOS >= 7']
    })
  ]
}

还有一种方法就是直接loader里配置postcss,就不需要创建postcss.config.js了。

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

npm webpack去打包的时候，npm可能会提示你如下信息：
意思就是让我们在package.json里添加browserslist这个key的配置，

 Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option can cause errors. Browserslist config
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist