如何用80行代码开发一个Webpack插件并成功发布至npm平台？

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

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

1. 前言

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

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

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

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

2.1 Webpack 构建流程

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

• 初始化阶段：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler。