这是我参与「第四届青训营」笔记创作活动的第19天。

笔记小结： 本节课详细讲了Webpack的作用、配置结构及其关键配置项，还讲了Loader中的链式调用、插件的实现原理与一些其他特性等。包含其应用范围及打包的核心流程。本课程的内容较多，知识点较复杂，我将把本门课程的内容分两篇进行阐述，本篇是进阶篇，重点在于学会扩展 Webpack，以及源码级理解 Webpack打包编译原理。现对照课程内容顺序将笔记补充如下。

03. 理解Loader

webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。
loader 通过在 require() 语句中使用 loadername! 前缀来激活，或者通过 webpack 配置中的正则表达式来自动应用 - 查看配置。

Loader核心功能：将非JS资源转换为JS资源

安装Loader

npm add -D css-loader style-loader less-loader

添加module处理less文件

module.exports = { 
    module: {
        rules: [
            {
                test: /\.less$/i,
                use:[
                    "style-loader",
                    "css-loader",
                    "less-loader"，
                ],
            },
        ],
    },
};

认识Loader：链式调用

less-loader: 实现less => css的转换
css-loader: 实现css => js的转换，将CSS包装成类似module.exports = “${css}” 的内容，包装后的内容符合JavaScript 语法
style-loader：将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签

认识Loader：其他特性

特点

链式执行
支持异步执行
分normal、pitch两种模式
参考：Webpack 原理系列七：如何编写loader (qq.com)

module.exports = function(source, sourceMap?, data?) {
	// source 为loader的输入
	//可能是文件内容，也可能是上一个loader处理结果
	return source;
};

常用Loader

站在使用角度，建议掌握这些常见Loader的功能、配置方法

思考题

Loader输入是什么？要求的输出是什么？
Loader的链式调用是什么意思？如何串联多个Loader？
Loader中如何处理异步场景？要抛一个异常的话要怎么抛

04. 理解插件

什么是插件

很多知名工具，如:
- VS Code、Web Storm、Chrome、Firefox
- Babel、Webpack、 Rollup、 Eslint
- Vue、Redux、 Quill、 Axios
等等，都设计了所谓"插件”架构，为什么?

插件可以提升整个应用的拓展性

假设一个应用没有任何插件，整一个就是特别复杂的过程，那么：

新人需要了解整个流程细节，上手成本高
功能迭代成本高，牵一发动全身
功能僵化，作为开源项目而言缺乏成长性

心智成本高 => 可维护性低 => 生命力弱
插件架构精髓： 对扩展开放，对修改封闭，其实就是开闭原则

甚至，Webpack本身的很多功能也是基于插件实现的

如何编写插件

首先：插件围绕钩子展开

class SomePlugin {
    apply(compile) {
    	compiler.hooks.thisCompilation.tap('SomePlugin', (compilation) => {
    	})
    }
}

钩子

时机：编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情；
上下文：通过tapable提供的回调机制，以参数方式传递上下文信息;
交互：在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变

时机：compier.hooks.compilation
参数：compilation等
交互：dependencyFactories.set

思考题

Loader与插件有什么区同点?
"钩子“有什么作用?如何监听钩子函数?

参考资料：

05. 学习方法

入门级：学会灵活应用
- 理解打包流程
- 熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成Vue、React、 Babel、 Eslint、 Less、 Sass、图片处理等工具的Webpack环境
- 掌握常见脚手架工具的用法，例如: Vue-cli、 create-react- app、@angular/cli
进阶：学会扩展Webpack
- 理解Loader、 Plugin机制，能够自行开发Webpack组件
- 理解常见性能优化手段，并能用于解决实际问题
- 理解前端工程化概念与生态现状
大师：源码级理解Webpack打包编译原理
- 阅读源码，理解Webpack编译、打包原理，甚至能够参与共建

总结感想:
这节课详细讲了Webpack的Webpack的作用、配置结构及其关键配置项，还讲了Loader中的链式调用、插件的实现原理与一些其他特性等，可以看出老师对Webpack的研究非常详细透彻，课上都是直接进行调试进入loader内部等帮助我们理解。老师还总结了Webpack知识体系：Webpack 5 知识体系 - GitMind。

感谢范文杰老师的精彩讲解。

Webpack 知识体系学习(2) | 青训营笔记