用了这么久 webpack 一直没有书写过相关记录，随着公司对博客技术分享和引用的需要以及之前面试或被面试的过程中遇到的问题，于是就想简单的记录一些内容。以下这篇博客来讲解工作以来自己是如何单位所需的 webpack loader 和 plugin。从程序员的角度讲就是如何自定义 webpack 的加载器与插件，以下纯属个人理解，有参考官方文档以及相关其他博客。大家可直接查看官方文档进行书写。官方文档地址如下:https://webpack.docschina.org/contribute/。
顺便多写几个前端的学习地址:React中文文档https://react.docschina.org/；Redux中文文档https://www.redux.org.cn/；渐进式JAVASCRIPT框架之VUE讲解https://cn.vuejs.org/index.html；webpack中文文档https://www.webpackjs.com/concepts/
首先我们需要知道loaders和plugins的作用与区别；
这一点从过往案例中分析思考也会有所体会。请看图
从以上两段代码中我们就可以知道loader其实就是用于编译过程中解析各类文件格式并输出 文件对象，供开发者快速使用的工具。而Plugin用在解析模板文件的，主要是利用编译过程中各个钩子事件来完成一些操作的。
总结：
loader
一、loader 是什么，有什么用
- 是 webpack 用于在编译过程中解析各类文件格式，并输出；
- 本质上就是一个 node 模块，通过写一个函数来完成自动化的过程；
- 由此我们就可以在开发模式下，通过解析各类前端无法解析的文件格式，然后将其解析后返回为对象或字符串供前端开发时使用，在 webpack 的编译过程中自动会将我们前端项目中引用的文件格式对应到指定 loader 解析后输出。
Plugin
二、Plugin 是什么，有什么用
- 是 webpack 用于在编译过程中利用钩子进行各种自定义输出的函数；
- 本质上就是一个 node 模块，通过写一个类来使用编译暴漏出来的钩子实现编译过程的可控；
- 由此我们就可以在开发模式下，可以通过监听编译过程的各个钩子事件来完成如释出模版，对 js、css、html 进行压缩、去重等各类操作，结束后释出对应文件等等你可以想到的任何操作
然后我继续看该如何定义一个或者书写loader和plugin
三、怎么写一个自定义 loader
我们以此为例:写一个非常简单的 loader 来解析 txt 文件，它将满足以下功能
- 读取 txt 文件内容并输出为一个对象，对象内包括文件内容与文件名
- 读取 webpack loader 选项，将内容中的 [name] 替换为我们选项 name 的值
文件名称就定义成 txt-loader.js
书写完毕后就是webpack配置
然后进行前端引用
更复杂的用法，我们可以自行参照文档
https://webpack.docschina.org/contribute/writing-a-loader/
四、然后再说怎么写一个自定义 plugin
上面我们已经说过:webpack 的插件其实就是在函数中通过调用 webpack 执行的钩子来完成自动化的过程，在函数中我们通过监听 compiler 钩子，并在回调中执行我们需要做的事情，最后调用回调中的第二个参数 callback 使 webpack 继续构建，否则将在此处停止编译，整个过程都是在 webpack 的整个编译过程中利用其暴漏出的钩子进行的
以下是我写的一个简短的例子，它完成了这样的功能：
- 仿照 htmlWebpackPlugin 进行模版输出，实例化插件时传入模版地址，释出文件名，需解析参数变量即可；
- 解析过程中会解析 {{ key }} 中的 param，将 {{ key }} => 实例化对象中 params[key
webpack 配置，跟之前我们学习最初时配置htmlWebpackPlugin 是一样的。首先引入插件
然后在webpack.config.js中配置
上面的写法是 webpack2 或 webpack3 调用钩子的方法，在 4 中已变为
compilation.hooks.compile.tap([compiler hooks event], (compilation, callback) => { ... })
