如何将80行代码的Webpack插件发布为npm包？

本文共计1965个文字，预计阅读时间需要8分钟。

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，递归地进行编译处理。