这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天

上一篇文章认识了Webpack，了解了它的使用方法。而这篇文章将介绍Loader和插件。本篇文章的重点在于使用Loader、认识Loader :链式调用与其他特性、Loader编写、常见Loader、 插件定义解析、插件设计优势、Loader与插件的差异以及Webpack学习方法推荐。

Loader

引入

为了处理非标准JS资源，设计出资源翻译模块Loader用于将资源翻译为标准JS。

使用Loader

认识Loader

链式调用

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

其他特性

特点：

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

如何编写Loader

常见Loader

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

理解插件

插件概念以及产生的原因

很多知名工具，如:VS Code、Web Storm、Chrome、Firefox、Babel、Webpack、Rollup、Eslint、QD Vue、Redux、Quill、Axios等等，都设计了所谓"插件”架构。 设计插件是一个特别复杂的过程：

• 新人需要了解整个流程细节， 上手成本高
• 功能迭代成本高，牵一发动全身
• 功能僵化，作为开源项目而言缺乏成长性
• ...
• 心智成本高=>可维护性低=>生命力弱
• 插件架构精髓:对扩展开放，对修改封闭

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

插件的使用

插件能力非常强大，甚至能改变webpack输出结构。

首先:插件围绕钩子展开

钩子的作用重在:在编译的某个环节触发钩子，某种程度上可以理解为--事件。

钩子的核心信息

1.时机：编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情

2.上下文：通过tapable提供的回调机制，以参数方式传递上下文信息

3.交互：在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变

三、总结

通过学习Loader和插件，我知道了Loader的作用与常用Loader 插件基本形态与作用。同时对 Webpack有了更深的了解，并且知道了搭建集成的方法，能够更好的搭建集成。同时我们需要注意Loader 出来的 qml 界面，在界面关闭时，一定要清空 Loader 资源。