rules配置项

• 可以有多个值, 用数组存储多个值
• 每一值表示一个打包规则, 用对象表示

1.1. 打包规则对象

1. test 属性

该规则所适用的文件名, 值为正则表达式

2. use 属性

2.1. 语法之一

• 可以有多个值, 用数组存储多个值
• 每个值用字符串, 表示所用的拓展loader

2.2. 语法之一

• 值为一个对象
• 对象中的loader属性, 值为字符串, 表示所用的loader
• options属性, 值为对象, 用来给loader传参

3. exclude和include属性

顾名思义, 值同样可以使用正则表达式

4. type属性

• 表示使用webpack内置的loader
• 值为字符串, 表示loader的类型

4.1. 静态资源(图片之类的)

“asset/resource”

实例:

rules:[
	{
		test:/\.css$/i,
		use:["style-loader","css-loader"],
	},
	{
		test:/\.(png|svg|jpg|jpeg|gif)$/i,
		type:"asset/resource",
	},
	{
		test:/\.js$/i,
			exclude: /node_modules/,
			use:{
				loader: "babel-loader",
				option:{
					presets:["@babel/preset-env"]
				}
			}
	},
]