为什么用webpack打包

先来看webpack官网的这张图片

介绍webpack，首先记住两个词
模块
打包

如果不打包的话，我们的项目中有很多文件会相互依赖，有几个文件就要发多少次请求来获取文件，如果一个文件因为网络问题延误了整个页面也会延误，而当我们的项目逐渐变大，有几十个到上百个JavaScript文件的时候，那问题会更严重，不但有延迟问题，还会遇到很难维护的问题

而webpack就解决了这些问题，把所有JavaScript文件合成一个文件，这样就减少了http请求数量，让我们的页面加载和显示更快。不过这个合并的阶段是在开发完成之后才进行的，也就是说开发阶段我仍然是有a.js，b.js和c.js等等这些文件的，这样才好开发和维护，因为如果开发阶段就合并的话，就相当于我基于一个可能上万行的文件进行开发，这样的代码是没法维护的。

在开发后完成的这个合并的过程就是打包，这样你就明白为什么要打包了吧。webpack在打包过程中，会分析各个文件之间的依赖关系，然后生成一个依赖图并用文件的形式保存下来，未来浏览器运行代码的时候就可以读取这个文件，就知道了各个代码块之间的关联以及如何调用了。

注意：webpack除了能打包js文件，还可以打包css, scss, jpg, svg等

总结：
在webpack中，每个文件都可以看作是一个模块，打包是webpack最核心的功能，webpack其它所有的功能都是为了让打包这个功能更好。我们从一个简单的html页面介绍了通过webpack对模块进行打包，既保留了单个模块的可维护性，又减少了页面的http请求，减少了页面加载时间，从而增加了页面的显示速度，让整个应用的体验更好。