webpack4中使用autoprefixer失效的问题

要用 autoprefixer 需要借助postcss-loader

--save-dev 缩写是 -D

安装命令：
npm install webpack style-loader css-loader postcss-loader autoprefixer -D

如果 webpack style-loader css-loader 都安装过，就直接：
npm install postcss-loader autoprefixer -D

webpack.config.js 文件里加如下配置：

{
  test:/\.css$/,
  use: [
  	{loader:'style-loader'},
  	// {loader:'css-loader',
  	// options:{
  	//	 modules:true,
  	//	 importLoaders:1	   
  	//  }
  	// },
  	{loader:'css-loader'},
  	{loader:'postcss-loader'}
  ]
}

根目录新建 postcss.config.js文件

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

以上正常步骤设置完，你以为就可以正常出效果了？天真，咱还要设置支持的浏览器，不然没效果。

package.json 里 ( 与 devDependencies 同级 ) ，设置支持哪些浏览器，必须设置支持的浏览器才会自动添加浏览器兼容

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

当然，你也可以直接在postcss.config.js文件里设置浏览器支持，比如这样，也是能成功给css属性加上前缀：

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

但是当你运行npx webpack去打包的时候，npm会提示你如下信息：

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

  Using browsers option cause some error. 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

让咱在package.json里添加browserslist这个key的配置，或者新建个.browserslistrc的文件，用这样的方式代替autoprefixer的browsers配置项。算是优化项，不这样搞也不会报错。