webpack5中postcss-loader的使用方式

webpack5中使用postcss-loader，与webpack4中的使用方式略有不同！

let‘'s see the code in webpack5

1.package.json

npm安装必要的包

"devDependencies": {
		"css-loader": "^6.5.1",
		"file-loader": "^6.2.0",
		"html-loader": "^3.0.1",
		"html-webpack-plugin": "^5.5.0",
		"mini-css-extract-plugin": "^2.4.4",
		"postcss": "^8.3.11",
		"postcss-loader": "^6.2.0",
		"postcss-preset-env": "^6.7.0",
		"style-loader": "^3.3.1",
		"url-loader": "^4.1.1",
		"webpack": "^5.61.0",
		"webpack-cli": "^4.9.1"
	},

version："postcss": "^8.3.11","postcss-loader": "^6.2.0", "postcss-preset-env": "^6.7.0",

2.webpack.config.js

添加loader: postcss-loader

这种写法看起来很简单，postcss-loader的配置都在另外一个文件中

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

		],
	},

3.postcss.config.js

在根目录下创建postcss的配置文件postcss.config.js

module.exports = {
	plugins: [
		[
			//postcss-preset-env插件读取package.json文件中的browserslist配置
			require('postcss-preset-env')(),
		],
	],
};

4.package.json

在package.json中添加browserslist，这个就是一些常用的，其他请查文档

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

5. 特别注意设置nodejs的环境变量

在webpack.congfig.js中添加

//配置nodejs的环境变量,默认为production
process.env.NODE_ENV = 'development';

module.exports = {.......｝

OK完成！，如果对你有帮助请点赞！谢谢