webpack5 css处理样式资源

处理css资源

---

1.下载包

npm i css-loader style-loader -D

2.功能介绍

• css-loader：把css文件编译成webpack能处理的模块；
• style-loader：创建style标签

3.配置

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

处理less资源

---

1.下载包

npm i less-loader -D

2.功能介绍

• less-loader：处理less文件成css文件

3.配置

{
	test:/\.less$/,
	use:['style-loader','css-loader','less-loader']
}

处理scss资源

---

1.下载包

npm i sass-loader sass -D

2.功能介绍

• sass-loader：把scss文件处理成css;
• sass：sass-loader依赖sass进行编译

3.配置

{
	test:/\.scss$/,
	use:['style-loader',css-loader',''sass-loader]
}

提取css成单独文件

---

1.下载包

npm i mini-css-extract-plugin -D

2.配置

// 第一步：
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
//第二步：将style-loader改成 MiniCssExtractPlugin.loader
//第三步：
plugins:[
	new MiniCssExtractPlugin({
		filename:'static/css/[name][ext]',//定义文件名
	})
]

兼容性处理

---

1.下载包

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

2.配置

{
	test:/\.css$/,
	use:["style-loader", "css-loader", "postcss-loader"]
}
//创建一个.browserslistrc文件
# 注释是这样写的，以#号开头
last 1 version #最后的一个版本
> 1%  #代表全球超过1%使用的浏览器
maintained node versions #所有还被 node 基金会维护的 node 版本
not dead

压缩css

---

1.下载包

npm i  css-minimizer-weboack-plugin -D

2.配置

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

optimization:{
	minimize: true,
	minimizer:[
		new CssMinimizerPlugin()
	]