本文内容基于webpack 5.74.0版本进行分析由于webpack5整体代码过于复杂，为了减少复杂度，本文所有分析将只基于js文件类型进行分析，不会对其它类型（css、image）进行分析，所举的例子也都是基于js类型为了增加可读性，会对源码进行删减、调整顺序、改变的操作，文中所有源码均可视作为伪代码

本文内容基于webpack 5.74.0版本进行分析webpack5核心流程专栏共有5篇，使用流程图的形式分析了webpack5的构建原理：「Webpack5源码」make阶段（流程图）分析「Webpack5源码」enhanced-resolve路径解析库源码分析「Webpack5源码」seal阶段（流程图）分析(一)「Webpack5源码」seal阶段分析(二)-SplitChunksPlugin源码「We...

本文内容基于webpack 5.74.0版本进行分析webpack5核心流程专栏共有5篇，使用流程图的形式分析了webpack5的构建原理：「Webpack5源码」make阶段（流程图）分析「Webpack5源码」enhanced-resolve路径解析库源码分析「Webpack5源码」seal阶段（流程图）分析(一)「Webpack5源码」seal阶段分析(二)-SplitChunksPlugin源码「We...

本文内容基于webpack 5.74.0和enhanced-resolve 5.12.0版本进行分析webpack5核心流程专栏共有5篇，使用流程图的形式分析了webpack5的构建原理：「Webpack5源码」make阶段（流程图）分析「Webpack5源码」enhanced-resolve路径解析库源码分析「Webpack5源码」seal阶段（流程图）分析(一)「Webpack5源码」seal阶段分析(二)-...

本文内容基于webpack 5.74.0版本进行分析webpack5核心流程专栏共有5篇，使用流程图的形式分析了webpack5的构建原理：「Webpack5源码」make阶段（流程图）分析「Webpack5源码」enhanced-resolve路径解析库源码分析「Webpack5源码」seal阶段（流程图）分析(一)「Webpack5源码」seal阶段分析(二)-SplitChunksPlugin源码「We...

本文基于vite 4.3.0-beta.1版本的源码进行分析前言在「vite4源码」dev模式整体流程浅析（一）的文章中，我们已经分析了预构建、请求拦截以及常见的插件源码，在本文中，我们将详细分析vite开发模式下的热更新逻辑5. 热更新HMR5.1 服务器启动启动热更新WebSocketServer服务，启动文件监控createWebsocketServer()启动webs...

本文基于vite 4.3.0-beta.1版本的源码进行分析文章内容vite 本地服务器的创建流程分析vite 预构建流程分析vite middlewares拦截请求资源分析vite 热更新HMR流程分析1. 入口npm run dev在项目的package.json中注册对应的scripts命令，当我们运行npm run dev时，本质就是运行了vite {代码...} 而vite命令是在哪里注册的呢...

前置问题本地文件改变，webpack是如何知道并且触发编译的？浏览器是如何知道本地代码重新编译，并且迅速请求了新生成的文件的？webpack本地服务器是如何告知浏览器？浏览器获得这些文件又是如何热更新的？热更新的流程是什么？前置知识点一. 代码改变时自动编译的几种方法摘录自 webpack官方文档1.webpack's Watch Mode2...