Webpack是干嘛的？
- 砖家：前端工程的打包构建工具，而且号称是最屌的一款；
何为打包构建？
- 蛮荒时代HTML+CSS+JS搞定一切，浏览器也能直接识别；
- 现如今ES6...（ES7/8/9/10/11/12等：我等难道不配拥有姓名??）
- 现如今ES6、TS、Vue、JSX、CSS预编译语言（Sass/Less/Stylus）、各种模块化语法、等等一些列诲人不倦、卷人恨不能万段的新概念层出不穷，今日之前端早已不是旧日之前端；
- 这些乱七八糟的破玩意号称能帮我们简化开发、提升前端性能、提高代码复用率、实现组件化开发、让样式写起来超爽、让代码更严谨更健壮、...总之爽到你实在不想再爽下去为止；
- 然而这些新来的爽料并不能我浏览器所直接识别，浏览器还是只认HTML+CSS+ES5；
- 所以Webpack出来把这些东西重新编译一下，产出依然是HTML+CSS+JS，于是浏览器终于能直接识别了；
- 这个将浏览器不能直接识别的源码（模块/module）重新编译、拆分组织（形成块/chunk）、并输出（包/bundle）的过程就称之为【打包构建】； PS：这样一来，学习新知识的时候爽一次，结合无数种新知识写源码的时候再爽一次，打包构建配置的时候又爽一次，一共爽了三轮！虽然每种新知识的坑都还蛮多的，虽然Webpack配置本身的坑更是有名的多，虽然Webpack升级也不算太快（也就是在你刚刚玩熟准备休息一下的时候它重新升级一版让你重新学过），虽然Webpack可能在不久的将来被Vite取代，但你已经爽了三轮！大佬们说它爽，你就必须在面试时就分析清楚它到底爽在哪里，从而证明你的确很爽，从而证明你也是大佬！——事实就是这样的！
Webpack打包构建的基本原理是什么？
- 今日之前端工程都是模块化的，A引用B,B又引用CD,CD又分别引用DEF和HIJ，最后形成一棵庞大的依赖树；
- Webpack从入口文件开始顺藤摸瓜，将一整棵依赖树都连根拔起，然后逐节点地编译处理为浏览器能直接识别的代码，并按执行顺序汇总打包到一个JS文件中（当然也可以根据具体不同配置进行分包）；
说说何为module、何为chunk、何为bundle？
- module即源代码模块。可以是JS/TS/dts/JSX，CSS/SASS/LESS/STYLUS,Vue，各种图片文件，json/xml等数据文件，等等；
- bundle是最终输出的包，你会发现源代码模块一大堆，最终输出的包通常就寥寥几个JS文件和CSS文件，外加那么一两个静态资源文件夹，图片神马的;
- chunk翻译过来叫块，从源码模块到最终包的打包过程中，你可以自由地将不同模块做整合与拆分，形成的就是块；
- bundle指的是产出包的整体，chunk是bundle的组成部分；
为什么要拆分重组呢？
- 一个为了最大化复用；例如组件库、Vue/React框架、常用的轮子、node_modules里的东西，更新频率极低，组织在一起就没必要每次升级时都重新下载；
- 一个时为了提升性能；例如业务代码，更新频率非常高，组织为一个chunk，其体积通常较小（你能写出1M文字出来吗），每次升级时重新下载这一点点东西即可，性能高；
下一节我们来看看一个Webpack配置文件的组成部分
