示例代码 假设我们有两个模块：一个 ESM 格式和一个 CommonJS 格式： math.js (CommonJS) index.js (ESM) 使用 Webpack 编译后的代码 Webpack

前言 为什么我们要学习webpack执行流程？ 第一：webpack我们经常使用，开发必备，囊括了很多很有趣的功能，比如热更新，启动服务器，babel解析等等，简直就是一个包工头，让我们的开发变得简单

前言 每次用vite创建项目秒建好，前几天用vue-cli创建了一个项目，足足等了我一分钟，那为什么用 vite 比 webpack 要快呢，这篇文章带你梳理清楚它们的原理及不同之处！文章有一点长，看

这“讨厌”的面试官又来了，挺着个油腻的大肚子，格子衫堪堪裹住他的腰，摸了摸他的地中海发型，张开自认为性感的厚嘴唇，说了句：“年轻人，这次我们来聊聊 webpack5吧。“

本文是我的前端面试系列的工具篇，汇总整理了webpack和Git的常见面试题，后续的复习过程中随时会对本文查漏补缺。如有不当之处，欢迎指正，感谢。

本文2708字，几乎浓缩了我3年多工作的全部精华。 差不多花了我5个晚上的时间整理，查阅了全网类似主题的文章30多个，包括多个大V的答案。从这些回答中，从最小的颗粒度进行拆解，加上我自己一遍一遍的反复

面试官灵魂三连问：你用过webpack么，它的原理是什么？ 你还知道些构建工具，各有什么优缺点？ 你在项目中有配置过么，在哪些场景配置过？

webpack久坐老大哥地位，vite后起之秀： webpack的第一次发布是在 2013 年发布，长久以来是主流的前端打包工具。vite 的第一次发布是在 2021 年，是近两年的后起之秀！

前面一篇文章介绍了如何做 Vite 的插件开发 # 20分钟掌握 Vite 插件开发，这篇文章介绍清晰 Vite 的构建原理，为什么比 Webpack 构建速度快这么多。