【Vue】1-3、Webpack 中的 loader

一、概述

在实际开发过程中，webpack 默认只能打包处理以 .js 后缀结尾的模块。

其他的非 .js 后缀名结尾的模块 webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

loader 加载器的作用 ：协助 webpack 打包处理特定的文件模块。

css-loader 可以打包处理 .css 相关文件
less-loader 可以打包处理 .less 相关文件
babel-loader 可以打包处理 webpack 无法处理的高级 js 语法

二、打包处理 css 文件

步骤：

1）运行 npm install style-loader@3.0.0 css-loader@5.2.6 -D 命令，安装处理 css 文件的 loader

2）在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

javascript 复制代码

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

其中，test 表示匹配的文件类型，use表示对应要调用的 loader

注意：

use 数组中指定的 loader 顺序是固定的

多个 loader 的调用顺序是：从后往前调用

三、打包处理 less 文件

步骤：

1）运行 npm install less-loader@10.0.1 less@4.1.1 -D 命令

2）在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

javascript 复制代码

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

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

步骤：

1）运行 npm install url-loader@4.1.1 file-loader@6.2.0 -D 命令

2）在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

javascript 复制代码

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

其中 ？之后的是 loader 的参数项：

limit 用来指定图片的大小，单位是字节（byte）
只有 <= limit 大小的图片，才会被转为 base64 格式的图片

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

webpack 只能打包处理一部分高级的 JavaScript 语法。

对于那些 webpack 无法处理的高级 js 语法，需要借助于 babel-loader 进行打包处理。

例如 webpack 无法处理下面的 JavaScript 代码：

javascript 复制代码

// 定义了名为 info 的装饰器
function info(target){
	// 为目标添加静态属性 info
	target.info = 'Person info.'
}
// 为 Person 类应用 info 装饰器
@info
class Person{}

// 打印 Person 的静态属性info
console.log(Person.info)

步骤：

1）运行 npm install babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D 命令

2）在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

javascript 复制代码

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

3）在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：

javascript 复制代码

module.exports = {
	// 声明 babel 可用的插件
	plugins:[
        [
            '@babel/plugin-proposal-decorators',
            {
                legacy: true
            }
        ]
    ]
}

Babel官网：https://babeljs.io/dosc

一叶知秋，奥妙玄心