webpack中常用的loader

通过loader打包非js模块

先了解loader能做点什么事情。
实际开发中，webpack默认只能打包处理.js后缀名结尾的模块，其他非.js结尾的模块无法处理，需要调用loader加载器才可以正常打包，不然会报错
loader加载器可以协助webpack打包处理特定的文件模块，如：

• less-loader 可以打包处理.less相关的文件
• sass-loader可以打包处理.scss相关的文件
• url-loader可以打包处理css中与url路径相关的文件

如下图loader的调用过程

打包处理css文件

1. 运行npm install style-loader css-loader -D命令，安装处理css文件的loader
2. 在webpack.config.js的module–>rules数组中，添加loader规则：
   其中test表示匹配的文件类型，use表示对应要调用的loader
   use数组中指定的loader顺序是固定的
   多个loader的调用顺序是：从后往前调用

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

打包处理less文件

1. 运行npm install less-loader less -D命令
2. 在webpack.config.js的module–>rules数组中添加loader规则
   写入less文件之后，运行npm run dev后less文件会自动写入css文件中

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

打包处理scss文件

1. 运行npm install sass-loader node-sass -D 命令
2. 在webpack.config.js的module–>rules数组中添加规则

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

配置postCSS自动添加css兼容性前缀

一般css中有一些选择器在ie低版本不支持，需要手动添加兼容性前缀，但每次添加会比较麻烦，借助postCSS可以快速自动添加

1. 运行npm install postcss-loader autoprefixer -D命令
2. 在项目根目录中创建postcss的配置文件postcss.config.js并初始化配置

//导入自动添加前缀的插件
const autoprefixer = require('autoprefixer')
module.exports = {
	plugins: [ autoprefixer ] //挂载插件
}

3. 在webpack.config.js的module–>rules数组中修改css的loader

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

打包样式表中的图片和字体文件

1. 运行npm install url-loader file-loader -D 命令
2. 在webpack.config.js的module–>rules数组中，添加loader规则
   其中？之后的是loader的参数
   limit用来指定图片的大小，单位是字节，只有大于等于图片的实际大小字节，才会被转为base64图片

module: {
	rules: [
		{
			test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
			use:'url-loader?limit=图片的大小字节'//如果在图片的大小字节+1，就会把图片地址转换为base64的图片格式，可以提高性能
		}
	]
}

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

1. 安装babel转换器相关的包：npm install babel-loader @babel/core @babel/runtime -D
2. 安装babel语法插件相关的包：npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3. 在项目根目录中，创建babel配置文件babel.config.js并初始化基本配置

module.exports = {
	presets: [ '@babel/preset-env' ],
	plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties' ]
}

4. 在webpack.config.js的module–>rules数组中添加liader规则

//exclude为排除项，表示babel-loader不需要处理node_modules中的js文件
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}