webpack5中css兼容性处理

» 场景

webpack5 通过 postcss 来处理 css 兼容性问题

webpack版本：

• “webpack”: “^5.52.1”,
• “webpack-cli”: “^4.8.0”

---

» 步骤

1.安装 postcss 插件

npm i postcss postcss-loader postcss-preset-env -D

插件版本：

“postcss”: “^8.3.7”,
“postcss-loader”: “^6.1.1”,
“postcss-preset-env”: “^6.7.0”,

2.package.json 中配置 browserslist

"browserslist": {
      "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
      ],
      "production": [
          ">0.1%",
          "not dead",
          "not op_mini all"
      ]
  }

3.配置 nodejs 的环境变量

process.env.NODE_ENV = 'development' // production

4.loader 配置

rules: [{
	test: /\.css$/,
	use: [
	    "style-loader",
	    "css-loader",
	    {
	        loader: 'postcss-loader',
	        options: {
	            // ident: 'postcss',
	            // plugins: () => {
	            //     // postcss的插件
	            //     require('postcss-preset-env')()
	            // }
	
	            // 新版写法
	            postcssOptions: {
	                plugins: [
	                    [
	                        'postcss-preset-env',
	                        {
	                            // 其他选项
	                        },
	                    ],
	                ],
	            }
	
	        }
	    }
	]
}]

postcss-preset-env 插件还可以通过 postcss.config.js 配置文件的方式引入

module.exports = {
  plugins: [
    [
      'postcss-preset-env',
      {
        // 其他选项
      },
    ],
  ],
};

此时 loader 的配置

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

---

打包后的css文件便会增加一些兼容的样式

display: -webkit-box;
display: flex;

文档地址：https://webpack.docschina.org/loaders/postcss-loader/