当我们使用webpack、babel时，我们是为了什么

对于前端的学习，我们都是从原生的html、js、css写起的，还记得第一次用浏览器打开index.html页面看见hello world时的欣喜吗？可能我们都是从那一刻爱上所见即所得的前端吧~

随着基础知识的夯实，我们会投入到较大的项目开发之中去，为了获得更多工具函数、为了代码结构更有组织性等等原因，我们逐渐引入各种工具库，使用甚至开发一个框架。

当我选择了一个框架，比如流行的react，（因为我喜欢他的组件化开发、js里写HTML的语法糖），我一定需要使用webpack或者其他构建工具吗？

这个问题需要我们回到基础概念，浏览器可以运行什么代码？
答案是原生的html、js、css

下图是一个最简单的原生项目目录结构

框架、库为我们提供的很多语法糖、文件类型，是无法被浏览器直接解析运行的，所以我们需要用babel等编译器，编译为浏览器可识别的语言，用webpack等打包工具组合成最终的目录结构。
下图是一个简单的react项目构建过程。你可以看到图的左侧部分跟图一很相像。

不管我们书写的时候写的是什么类型的文件，.jsx、.scss、.less、.vue等等，最终都是要回归到第一张图简单的状态。index.html作为浏览器的入口文件，其他资源被加载进index.html之中。
而webpack、babel等就是帮助我们回到这种状态的工具。当然，webpack所提供的功能远不只有将多个文件打包成一个文件，性能较优的react的项目也不会将所有资源文件一股脑的加载进index.html。代码拆分+动态加载等功能会是进一步的优化方法。

将代码打包在一起、再拆分，看似无意义的折腾，其实是性能优化路上的不断探索。但是记得不论我们书写的语法变得多么花哨，目录结构变得多么复杂，打完包都会变回你熟悉的模样，因为浏览器只认识html、js、css哈哈哈~