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

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

Webpack使用原因和定义

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

为什么要使用Webpack

我们都知道一个大公司的网站往往做的都很炫酷，美观，功能很齐全。在这背后前端工程师花了很大的精力去做优化什么的。大型网站和大型项目中的背后都拥有着复杂的JS代码和很多依赖。 为了简化开发的复杂度，往往对程序切割分裂为不同的模块。

。

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

什么是Webpack

上面已经提到了 Webpack 的工作流程，我在举一个 不怎么严谨 的例子你们也许就能明白。

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