多图详解，一次性搞懂WebpackLoader
Webpack 是一个模块化打包工具，它被广泛地应用在前端领域的大多数项目中。利用 Webpack 我们不仅可以打包 JS 文件，还可以打包图片、CSS、字体等其他类型的资源文件。而支持打包非 JS 文件的特性是基于 Loader 机制来实现的。因此要学好 Webpack，我们就需要掌握 Loader 机制。本文阿宝哥将带大家一起深入学习 Webpack 的 Loader 机制，阅读完本文你将了解以下内容：
公司专注于为企业提供网站设计制作、成都网站建设、微信公众号开发、商城网站定制开发，微信小程序，软件定制设计等一站式互联网企业服务。凭借多年丰富的经验，我们会仔细了解各客户的需求而做出多方面的分析、设计、整合，为客户设计出具风格及创意性的商业解决方案，创新互联更提供一系列网站制作和网站推广的服务。
- Loader 的本质是什么?
- Normal Loader 和 Pitching Loader 是什么?
- Pitching Loader 的作用是什么?
- Loader 是如何被加载的?
- Loader 是如何被运行的?
- 多个 Loader 的执行顺序是什么?
- Pitching Loader 的熔断机制是如何实现的?
- Normal Loader 函数是如何被运行的?
- Loader 对象上 raw 属性有什么作用?
- Loader 函数体中的 this.callback 和 this.async 方法是哪里来的?
- Loader 最终的返回结果是如何被处理的?
一、Loader 的本质是什么?
由上图可知，Loader 本质上是导出函数的 JavaScript 模块。所导出的函数，可用于实现内容转换，该函数支持以下 3 个参数：
- /**
- * @param {string|Buffer} content 源文件的内容
- * @param {object} [map] 可以被 https://github.com/mozilla/source-map 使用的 SourceMap 数据
- * @param {any} [meta] meta 数据，可以是任何内容
- */
- function webpackLoader(content, map, meta) {
- // 你的webpack loader代码
- }
- module.exports = webpackLoader;
了解完导出函数的签名之后，我们就可以定义一个简单的 simpleLoader：
- function simpleLoader(content, map, meta) {
- console.log("我是 SimpleLoader");
- return content;
- }
- module.exports = simpleLoader;
以上的 simpleLoader 并不会对输入的内容进行任何处理，只是在该 Loader 执行时输出相应的信息。Webpack 允许用户为某些资源文件配置多个不同的 Loader，比如在处理 .css 文件的时候，我们用到了 style-loader 和 css-loader，具体配置方式如下所示：
webpack.config.js
- const path = require('path');
- module.exports = {
- entry: './src/index.js',
- output: {
- filename: 'bundle.js',
- path: path.resolve(__dirname, 'dist'),
- },
- module: {
- rules: [
- {
- test: /\.css$/i,
- use: ['style-loader', 'css-loader'],
- },
- ],
- },
- };
Webpack 这样设计的好处，是可以保证每个 Loader 的职责单一。同时，也方便后期 Loader 的组合和扩展。比如，你想让 Webpack 能够处理 Scss 文件，你只需先安装 sass-loader，然后在配置 Scss 文件的处理规则时，设置 rule 对象的 use 属性为 ['style-loader', 'css-loader', 'sass-loader'] 即可。
二、Normal Loader 和 Pitching Loader 是什么?
2.1 Normal Loader
Loader 本质上是导出函数的 JavaScript 模块，而该模块导出的函数(若是 ES6 模块，则是默认导出的函数)就被称为 Normal Loader。需要注意的是，这里我们介绍的 Normal Loader 与 Webpack Loader 分类中定义的 Loader 是不一样的。在 Webpack 中，loader 可以被分为 4 类：pre 前置、post 后置、normal 普通和 inline 行内。其中 pre 和 post loader，可以通过 rule 对象的 enforce 属性来指定：
- // webpack.config.js
- const path = require("path");
- module.exports = {
- module: {
- rules: [
- {
- test: /\.txt$/i,
- use: ["a-loader"],
- enforce: "post", // post loader
- },
- {
- test: /\.txt$/i,
- use: ["b-loader"], // normal loader
- },
- {
- test: /\.txt$/i,
- use: ["c-loader"],
- enforce: "pre", // pre loader
- },
- ],
- },
- };
了解完 Normal Loader 的概念之后，我们来动手写一下 Normal Loader。首先我们先来创建一个新的目录：
- $ mkdir webpack-loader-demo
然后进入该目录，使用 npm init -y 命令执行初始化操作。该命令成功执行后，会在当前目录生成一个 package.json 文件：
- {
- "name": "webpack-loader-demo",
- "version": "1.0.0",
- "description": "",
- "main": "index.js",
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
- },
- "keywords": [],
- "author": "",
- "license": "ISC"
- }
提示：本地所使用的开发环境：Node v12.16.2;Npm 6.14.4;
接着我们使用以下命令，安装一下 webpack 和 webpack-cli 依赖包：
- $ npm i webpack webpack-cli -D
安装完项目依赖后，我们根据以下目录结构来添加对应的目录和文件：
- ├── dist # 打包输出目录
- │ └── index.html
- ├── loaders # loaders文件夹
- │ ├── a-loader.js
- │ ├── b-loader.js
- │ └── c-loader.js
- ├── node_modules
- ├── package-lock.json
- ├── package.json
- ├── src # 源码目录
- │ ├── data.txt # 数据文件
- │ └── index.js # 入口文件
- └── webpack.config.js # webpack配置文件
dist/index.html
Webpack Loader 示例 Webpack Loader 示例