80行代码写一个Webpack插件并发布到npm

程序员文章站 2022-03-07 08:58:23

1. 前言最近在学习 webpack 相关的原理，以前只知道 webpack 的配置方法，但并不知道其内部流程，经过一轮的学习，感觉获益良多，为了巩固学习的内容，我决定尝试自己动手写一个插件。这个插件...

1. 前言

最近在学习 webpack 相关的原理，以前只知道 webpack 的配置方法，但并不知道其内部流程，经过一轮的学习，感觉获益良多，为了巩固学习的内容，我决定尝试自己动手写一个插件。

这个插件实现的功能比较简单：

默认清除 js 代码中的 console.log 的打印输出；
可通过传入配置，实现移除 console 的其它方法，如 console.warn、console.error 等；

2. webpack 的构建流程以及 plugin 的原理

2.1 webpack 构建流程

webpack 的主要构建流程，可以分为三个阶段:

初始化阶段：启动构建，读取与合并配置参数，加载 plugin，实例化 compiler。
编译阶段：从 entry 发出，针对每个 module 串行调用对应的 loader 去翻译文件内容，再找到该 module 依赖的 module，递归地进行编译处理。
生成阶段：对编译后的 module 组合成 chunk，把 chunk 转换成文件，输出到文件系统。

如果 webpack 打包生产环境文件时，只会执行一次构建，以上阶段会按顺序执行一遍。但是在开启监听模式时，如开发环境，webpack 会持续的进行构建。

80行代码写一个Webpack插件并发布到npm

2.2 plugin 原理

webpack 插件通常是一个带有 apply 函数的类，其中 constructor 可以接收传入的配置项。插件被安装时，apply 函数会被调用一次，并接收 compiler 对象，然后我们可以在 compiler 对象上监听不同的事件钩子，从而进行插件功能的开发。

2.3 compiler 和 compilation 对象

在开发 plugin 过程中最常用的两个对象就是 compiler 和 compilation：

compiler 对象在 webpack 启动时被实例化，该对象包含了 webpack 环境所有的配置信息，包括 options、loaders、plugins 等。在整个 webpack 构建过程中，compiler 对象是全局唯一的，它提供了很多事件钩子回调供插件使用。
compilation 对象包含了当前的模块资源、编译生成资源、变化的文件等。compilation 对象在 webpack 构建过程中并不是唯一的，如果在开发模式下 webpack 开启了文件检测功能，每当文件变化时，webpack 会重新构建，此时会生成一个新的 compilation 对象。compilation 对象也提供了很多事件回调供插件做扩展。

3. 插件开发

3.1 项目目录

该插件实现的功能比较简单，文件目录也不复杂。首先新建一个空文件夹 remove-console-webpack-plugin，并在该文件夹目录下运行 npm init，根据提示来填写 package.json 相关信息。然后再新建一个 src 文件夹，插件主要代码就放在 src/index.js 里面。如果你需要把项目放到 github 上，最好也添加一下 .gitignore、readme.md 等文件。

3.2 插件代码

插件代码逻辑也并不复杂，主要有几点：

在构造函数中接收配置参数，并对参数进行合并，得到需要清除的 console 函数, 存放在 removed 数组中；
在 apply 函数中监听 compiler.hook.compilation 钩子，该钩子触发后，拿到 compilation 后进一步监听它的钩子，这里 webpack4 和 webpack5 的钩子不一样，需要做兼容；
定义 assetshandler 方法来处理 js 文件，利用正则表达式清除 removed 中包括的 console 函数；