此系列文章作为笔记，用于记录分析 webpack 源码主流程的过程。 版本不同，源码略微有差异。 本项目 demo 开源在github，欢迎交流学习。 采用 vscode 来打断点调试分析。 webpack 从配置初始化到打包完成定义了一个生命周期，在这个生命周期中的每一个阶段…

前不久写了一篇webpack基本原理和AST用法的文章，本来想接着写webpack plugin的原理的，但是发现webpack plugin高度依赖tapable这个库，不清楚tapable而直接去看webpack plugin始终有点雾里看花的意思。所以就先去看了下tapa…

模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新所有类型的模块，而无需完全刷新 一种是页面刷新，不保留页面状态，就是简单粗暴，直接 window.location.reload()。 另一种是基…

随着多终端设备的迅速普及，Web前端开发的复杂性和应用场景日益扩大，Webpack在前端构建演变的工程化浪潮中担当起了针对不同应用场景打包的大任。 如今，Webpack可谓是JavaScript社区最伟大的项目之一。 本文力争从源码层面窥探Webpack的实现原理。文中出示了核…

Webpack凭借强大的功能，成为最流行和最活跃的打包工具，也是面试时高级程序员必须掌握的“软技能”；笔者结合在项目中的使用经验，介绍webpack的使用；本文是入门篇，主要介绍webpack的入口、输出和各种loader、plugins的使用以及开发环境的搭建，技术大佬请ct…

前几个月写的一篇文章，还没在掘金发过。 平时在使用 antd、element 等组件库的时候，都会使用到一个 Babel 插件：babel-plugin-import，这篇文章通过例子和分析源码简单说一下这个插件做了一些什么事情，并且实现一个最小可用版本。 antd 和 ele…

在大型项目开发中，经常会遇到这样一个场景，QA 丢给你一个出问题的链接，但是你完全不知道这个页面 & 组件对应的文件位置。 react-dev-inspector 就是应此需求而生。 可以在 预览网站 体验一下。 需要加一个 webpack loader 去遍历编译前…

作为前端每天都在打交道的 webpack ，学精是很有必要的，尤其是负责文件解析的 webpack-loader（以下简称loader），它作为 webpack 的加载器成了打包必不可少的一环。本文将从实现层面洞察 loader 的实现原理，相信看完本文，你自己也可以写一个属于…