Webpack入门（1）- 图解"webpack是什么"

前言

毫无疑问，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工做流程

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

未完待续...

欢迎访问个人博客，会分享一些技术文章，一块儿学习前端。