本文是「Webpack5源码」make阶段（流程图）分析的补充文章，大量流程图完美展示整个解析流程，完全值得点进来看一看

采用模块化方式编写代码让我们可以更好的组织代码结构，node在解析依赖时，首先会获取依赖的文件是否存在，即每当遇到import或require这些导入语法时，就会根据规则去找到需要解析的文件路径。 刚开始看到结果可能会疑惑，为什么返回结果是node.js？他是怎么找到node_…

本篇文章 耗时 7个小时左右才完工，篇幅涉及到大量的源码及其分析的过程图解和数据，阅读前，请保证自己有充分的时间，尽情的去享受吸收知识进入脑子的过程。

所有人都知道 Webpack 很复杂，但 Webpack 的源码却很优雅，是一个典型的可插拔架构，不仅逻辑清晰，而且灵活好扩展。近几年出来的一些构建工具，大多也都参考了 Webpack 的这种架构方式

本文适用于前端方向的同学（没错就是给自己看的😭），Webpack 的插件机制本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是 tapable。一起学习吧~

最近在用webpack-bundle-analyzer包分析构建产物的时候发现soundmanager2的体积比较大。于是我在node_modules里面找了下soundmanager2的代码，发现默认导出的文件是带调试功能的未压缩版本。如果可以在最终构建包里面使用soundm…

食用本文的文档说明：3000字图文并茂带你熟悉 webpack 依赖中超强解析库enhance-resolve 的整体流程，以及插件机制实现的原理（PS: webpack 也是相同的原理，一举两得）

webpack 的特点之一是处理一切模块，我们可以将逻辑拆分到不同的文件中，然后通过模块化方案进行导出和引入。现在 ES6 的 Module 则是大家最常用的模块化方案，所以你一定写过 import './xxx' 或者 import 'something-in-nodemod…

其实，hook就像DOM事件系统里面的【事件】，而tap method就是我们用于监听事件的addEventListener。 从实现的角度来说，webpack plugin就是一个有apply方法的javascrit对象。跟react组件必须实现render方法一样，这个ja…