前端小伙伴都知道，为了降低包大小，经常会把依赖的前端模块独立打包，比如把 vue、vue-router 打到一个单独的包 vendor 中。另外，常会将存在多个路由的复杂页面的每个页面都单独打一个包，只有访问某个页面的时候，再去下载该页面的js包，以此来加快首页的渲染。 无论是…

HMR即Hot Module Replacement是指当你对代码修改并保存后，webpack将会对代码进行重新打包，并将改动的模块发送到浏览器端，浏览器用新的模块替换掉旧的模块，去实现局部更新页面而非整体刷新页面。接下来将从使用到实现一版简易功能带领大家深入浅出HMR。 如上…

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

Webpack热更新（ Hot Module Replacement，简称 HMR，后续均以 HMR 替代），无需完全刷新整个页面的同时，更新所有类型的模块，是 Webpack 提供的最有用的功能之一。 HMR 作为一个 Webpack 内置的功能，可以通过 --hot 或者 …

Webpack 的使用目前已经是前端开发工程师必备技能之一。若是想在本地环境启动一个开发服务，大家只需在 webpack 的配置中，增加 devServer 的配置来启动。而 devServer 配置的本质是 webpack-dev-server 这个包提供的功能，而 webp…

1前言相信大家肯定看过很多产品的开箱测评，今天来跑一个软件新版的上手测评—webpack5.0。自从2018年2月，webpack4发布以来，webpack就暂时没有更进一步的重大更新，阔别2年多后，

可能很多人对于gulp都相对陌生，特别是vue，react出现以后，渐渐淡出了做业务前端人员的视野，14到16年的时候应该是它最巅峰的时候，真正的是出道即巅峰，取代了当时最火的grunt成为了前端构建的主流工具，就连某度都忍不住来瓜分一下流量，出了个fis（不过按照烂尾的惯例来…

主流框架中，不论是React还是Vue，都是使用Webpack进行资源的打包，这篇文章我们试着分析打包后的bundle文件来了解下其是如何进行静态和动态导入的。 modules​：缓存 ​module​ 代码块，每个 ​module​ 有一个 ​id​，开发环境默认以 ​mod…

今天我主要分享的是一些 webpack 中的易混淆知识点，也是面试的常见内容。我把这些分散在文档和教程里的内容总结起来，目前看是全网独一份，大家可以加个收藏，方便以后检索和学习