loader

webpack 只能处理.js文件，

处理其他例如.less,.sass,等其他文件或者高级语法时要配置对应的loader

例如 打包处理css文件

运行 npm i style-loader css-loader -D

在webpack.config.js中配置loader规则

module:{ //所有第三方文件模块的匹配规则
	rules:[   //文件后缀名匹配规则
		{ test: /\.css$/,use:['style-loader','css-loader']} //正则用//包裹，\.转义.符号 $表示以什么结尾
		//test 要匹配的规则   use 对应的loader   顺序是固定的，从后往前调用
		//匹配过程 ： 首先遇到.css文件webpack本身处理不了，从use后面开始匹配 ， 然后合并打包
	]
}

打包处理less文件

运行 npm i style-loader less-loader -D

module:{ //所有第三方文件模块的匹配规则
	rules:[   //文件后缀名匹配规则
		{ test: /\.less$/,use:['style-loader','css-loader','less-loader']} 
	]
}

打包处理样式表中与url路径相关的文件

运行 npm i url-loader file-loader -D

module:{ //所有第三方文件模块的匹配规则
	rules:[   //文件后缀名匹配规则
		{ test: /\.jpg|png|gif$/,use:'url-loader?limit=22229'} 
		//limit 用来指定图片大小，单位是字节（byte）  只有<=22229大小的图片，才会被转为base64格式的图片
		//base格式在浏览器查看时看不到完整路径
	]
}

另一种配置方式

module:{ //所有第三方文件模块的匹配规则
	rules:[   //文件后缀名匹配规则
		{ test: /\.jpg|png|gif$/,
		use:{
			loader:'url-loader',
			options:{
			limit:22229
			}
		}
		}
	]
}

打包处理js文件中的高级语法

对于js中的高级语法要借助于babel-loader进行打包处理

例如在index.js文件中通过static为Person类定义一个静态属性info

class Person{ static info = ‘person’}

console.log(Person.info) 想要显示person 要配置babel-loader

安装包

npm i babel-loader @babei/core @babel/plugin-proposal-class-properties

配置

{
test: /\.js$/,
//exclude为排除项，   表示只处理开发者编写的js文件，不需要处理node_modules下js文件，来加快处理速度
exclude:/node_modules/,
use:{
	loader:'babel-loader',
	options:{
	plugins:['@babel/plugin-proposal-class-properties'],
	}
}
}