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

👋本文介绍：1. 理解Loader | 2. 理解插件 | 3. 学习方法

理解Loader

Loader：用来解决Webpack只认识JS的问题
为了处理非标准Js资源，设计出资源翻译模块——Loader用于将资源翻译为标准JS

链式调用

链式调用: Webpack 会按顺序链式调用每个Loader；

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

🤔为什么我们有时要定义多个loader呢？

第一个loader的输出的结果往往会变成第二个loader的输入，每个loader完成的功能比较单一，通过链式调用就可以完成一件复杂的事情

Loader运行机制

特点：

链式执行
支持异步执行
分normal、pitch 两种模式

如何编写Loader

标准Loader所需具备的内容：

// loader.js

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

eslint-loader的实现：

可以参考的资料：www.webpackjs.com/contribute/…

常见Loader

理解插件

😅 webpack编译是一个特别复杂的过程，如果新人要去改工具的代码，需要了解整个流程细节，上手成本高、功能迭代成本高，牵一发动全身、功能僵化，作为开源项目而言缺乏成长性 ==> 导致项目难维护，生命力低
为了解决这个问题，就要用到了插件

插件架构精髓：对扩展开放，对修改封闭（只做最核心的部分）

在Webpack中使用插件（以`DashboardPlugin`为例）

//npm i-D webpack-dashboard
//Import the plugin: 
const DashboardPlugin =require("webpack-dashboard/plugin");
//Add it to your webpack configuration plugins.
module. exports={
    plugins:[ new DashboardPlugin()];
};

Dashboard插件的作用：
把编译过程的信息用好看的界面展示出来

钩子

首先：插件围绕着钩子展开
在编译的某个环节触发钩子，某种程度上可以理解为——事件
例如：
插件一般带有apply函数，图中的compiler为编译器对象

image (1).png
核心语句 compiler.hooks.thisCompilation.tap，其中 thisCompilation 为 tapable 仓库提供的钩子对象；tap 为订阅函数，用于注册回调。

钩子的核心信息：

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

触发钩子的时机

大体上从启动到结束，compiler 对象逐次触发如下钩子：

学习方法

Webpack5知识体系： gitmind.cn/app/doc/fac…

1. 入门应用（能用）

理解打包流程
熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成Vue、React、Babel、Eslint、Less、sass、图片处理等工具的Webpack环境
掌握常见脚手架工具的用法，例如：Vue-cli、reate-react-app、@angular/cli

2. 进阶

理解Loader、Plugin 机制，能够自行开发webpack组件（能写适合自己的Loader、Plugin）
理解常见性能优化手段，并能用于解决实际问题
理解前端工程化概念与生态现状

3. 大师级

阅读源码，理解Webpack编译、打包原理，甚至能够参与共建

参考资料：
mp.weixin.qq.com/s/tXkGx6Ckt…
mp.weixin.qq.com/s/SbJNbSVzS…

构建Webpack知识体系（进阶篇）｜ 青训营笔记