本文通过精美的图文，深入分析 Webpack Loader 的运行机制，带你吃透 Webpack loader 的 11 个核心问题。

解析 webpack 核心流程与插件架构，理解： - Webpack 从启动到输出 bundle，内部逻辑流转过程 - 编写 webpack 插件前，你需要弄清楚哪些问题

本文大部分篇幅都 focus 在 Tapable 框架，详细枚举了 Tapable 提供的钩子及各类型钩子的特点、运行逻辑、实现原理，并进一步讨论 Tapable 框架在 webpack 的作用

什么是插件？插件，又称做 Plug-in 或者 addin、addon 等，是一种遵循一定规范的应用程序接口编写出来的程序，从而可以为系统扩展原本不存在的特性。同时，如果一个系统支持了插件体系，也就拥有了可以实现用户自定义化的功能。 可以支持第三方开发者去扩展应用的能力边界。 …

随着项目不断发展壮大，组件数量开始变得越来越多，项目也开始变得庞大，webpack 编译的时间也会越来越久，我们现在的项目编译一次在 40s ——70s 之间，这是一个效率非常低下的操作。优化的手段有很多，之前项目原本已经做了很多，本文从缓存的角度进行优化讲解 babel-lo…

需要读到入口文件里面的内容。 分析入口文件，递归的去读取模块所依赖的文件内容，生成AST语法树。 我们创建了add.js文件和minus.js文件,然后 在index.js中引入，再将index.js文件引入index.html。 现在我们打开index.html。你猜会发生什…

笔者最近在整理关于 webpack 相关的知识点，一方面是因为自己掌握的知识点比较零碎、不够系统，有时候碰到问题不知从何下手，另外一方面 webpack5.0 已经在路上了，这的确是一个让人头秃的消息。 笔者把系列的文章都扔在了这个仓库：webpack 学习整理文档，有兴趣的同…

0. 背景 随着构建体系不断完善、构建体验不断优化，webpack 已经逐渐成为了前端构建体系的一大霸主，对于工作中的真正意义上的前端工程项目，webpack 已经成为了我们前端构建技术选型的不二选择，包括 create-react-app 以及 vue-cli 等等业内常见的…