前言

毫无疑问，Webpack在前端中有着独特的重要性，是你必须要熟悉的一个技能点。因为你在投简历浏览一些大公司的前端岗位时，Webpack毫无疑问是写明了至少要是熟悉Webpack。我在学Webpack期间，常常被它的配置，环境给绕晕了,现在重新开始学一遍，希望我可以掌握它。本着分享学习的态度，记录下我学习的过程，希望可以对一些初学Webpack的同学提供一点帮助。

Webpack使用原因和定义

我相信很多刚开始学Webpack的同学在学之前一定疯狂的在各大论坛或者百度搜索“什么是Webpack”，因为我就是这么干的。但是一些大牛的文章在提及什么是Webpack的时候总是一笔带过，看完之后也是云里雾里，迷迷糊糊。现在我用自己的语言来解释什么是Webpack。在此之前，还要向大家解释为什么要使用Webpack:

为什么要使用Webpack

我们都知道一个大公司的网站往往做的都很炫酷，美观，功能很齐全。在这背后前端工程师花了很大的精力去做优化什么的。大型网站和大型项目中的背后都拥有着复杂的JS代码和很多依赖。为了简化开发的复杂度，往往对程序切割分裂为不同的模块。 如图所示，把大型项目切割成很多不同的模块。那么，里面的箭头是怎么回事，我觉得可以理解为require。因为两个文件之间相互通联是靠require连接的。好比如，html文件利用link中引入样式一样。webpack整合了项目里的模块打包的更为精简。所以我们需要webpack。

• Webpack分析大型项目的结构
• 找到JS模块以及浏览器不能直接运行的模块(cjs,Sass,hbs等等)
• 将浏览器不能直接处理的文件转换和打包为合适的格式供浏览器直接处理。
• 这样前端工程师既可以更轻松系统的开发，浏览器也能更高效流畅的运行。

什么是Webpack

上面已经提到了Webpack的工作流程，我在举一个不怎么严谨的例子你们也许就能明白。
假如你去饭店吃饭，点完菜后你觉得把菜打包回寝室吃更爽一些。你点了很多菜，这些菜有麻辣的，酸辣的，甜的，还有水果，小糕点不同的口味。考虑到你的室友有的喜欢吃辣的，有的喜欢吃甜的，有的喜欢吃水果。如果全部的菜混在一起可能室友都不喜欢，你决定不混在一起，而是按照口味混在一起。把辣的菜混到一起，把甜的菜混到一起，把水果混到一起。这样你的室友就能够接受了。

结合上面webpack的工作流程，可以这样说：webpack分析大型项目的结构即分析这些菜是哪些口味；找到浏览器不能直接运行的模块，即分析哪些是你室友不能接受的口味；将浏览器不能直接处理的文件转换和打包为合适的格式供浏览器处理即将菜分类打包让你的室友可以接受。 结合上面的图，应该把Webpack的运行流程搞清楚了。

webpack工作流程

用文字叙述不直观，我尽量用图形的方式来说明。首先先说明依赖就是本文第一张图里面的箭头。

未完待续...