【webpack5】 autoprefixer不生效

【webpack5】 autoprefixer不生效

一、问题

一些新css特性需要加前缀来兼容浏览器：

  transform: rotate(30deg);

应该被转为：

/* -moz、-ms、-o、-webkit*/
-webkit-transform: rotate(30deg);
transform: rotate(30deg);

官方文档指导下配置（不生效）：

• webpack.config.js

 {
	 module: {
	    rules: [{
	        test: /\.css/,
	        use: ['style-loader', 'postcss-loader']
	    }]
	 }
}

• postcss.config.js

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

二、解决方案

• 方式一：package.json 加入以下浏览器配置列表

{
  "browserslist": [
    "defaults",
    "not ie < 9"
  ]
}

• 方式二：新增.browserslistrc

not ie < 9

三、问题原因

Autoprefixer 需要根据支持的浏览器决定是否要加前缀做兼容。

browserslist

The config to share target browsers and Node.js versions between different front-end tools. It is used in:
配置被用来处理浏览器、Node版本差异，以工具下引用了这个配置

Autoprefixer
Babel
postcss-preset-env
eslint-plugin-compat
stylelint-no-unsupported-browser-features
postcss-normalize
obsolete-webpack-plugin

All tools will find target browsers automatically, when you add the following to package.json:
以下所有工具会自动引用这个配置，当你添加到package.json

  "browserslist": [
    "defaults",
    "not IE 11",
    "maintained node versions"
  ]

Or in .browserslistrc config:

# Browsers that we support

defaults
not IE 11
maintained node versions

四、参考

https://www.cnblogs.com/guangzan/p/11264390.html
https://github.com/browserslist/browserslist#readme