Webpack入门（1）- 图解"webpack是什么"
栏目: JavaScript · 发布时间: 5年前
内容简介：毫无疑问，Webpack在前端中有着独特的重要性，是你必须要熟悉的一个技能点。因为你在投简历浏览一些大公司的我相信很多刚开始学我们都知道一个大公司的网站往往做的都很炫酷，美观，功能很齐全。在这背后前端工程师花了很大的精力去做优化什么的。大型网站和大型项目中的背后都拥有着复杂的JS代码和很多依赖。
毫无疑问，Webpack在前端中有着独特的重要性，是你必须要熟悉的一个技能点。因为你在投简历浏览一些大公司的 前端岗位 时，Webpack毫无疑问是写明了至少要是 熟悉Webpack 。我在学Webpack期间，常常被它的配置，环境给绕晕了,现在重新开始学一遍，希望我可以掌握它。本着分享学习的态度，记录下我学习的过程，希望可以对一些初学Webpack的同学提供一点帮助。
Webpack使用原因和定义
我相信很多刚开始学 Webpack 的同学在学之前一定疯狂的在各大论坛或者百度搜索“什么是 Webpack ”，因为我就是这么干的。但是一些大牛的文章在提及什么是 Webpack 的时候总是一笔带过，看完之后也是云里雾里，迷迷糊糊。现在我用自己的语言来解释什么是 Webpack 。在此之前，还要向大家解释为什么要使用 Webpack :
为什么要使用Webpack
我们都知道一个大公司的网站往往做的都很炫酷，美观，功能很齐全。在这背后前端工程师花了很大的精力去做优化什么的。大型网站和大型项目中的背后都拥有着复杂的JS代码和很多依赖。 为了简化开发的复杂度，往往对程序切割分裂为不同的模块。
require 。因为两个文件之间相互通联是靠
require 连接的。好比如，
html 文件利用
link 中引入样式一样。模块化的开发提高了开发效率，但是就把压力传给了浏览器，浏览器要进行额外的处理来让浏览器识别。所以我们需要
webpack
。
- Webpack分析大型项目的结构
- 找到JS模块以及浏览器不能直接运行的模块(cjs,Sass,hbs等等)
- 将浏览器不能识别的文件转换和打包为合适的格式供浏览器识别。
- 这样前端工程师既可以更轻松系统的开发，浏览器也能更高效流畅的运行。
什么是Webpack
上面已经提到了 Webpack 的工作流程，我在举一个 不怎么严谨 的例子你们也许就能明白。
假如你去饭店吃饭，点完菜后你觉得把菜打包回寝室吃更爽一些。你点了很多菜，这些菜有麻辣的，酸辣的，甜的，还有水果，小糕点不同的口味。考虑到你的室友有的喜欢吃辣的，有的喜欢吃甜的，有的喜欢吃水果。如果全部的菜混在一起可能室友都不喜欢，你决定不混在一起，而是按照口味混在一起。把辣的菜混到一起，把甜的菜混到一起，把水果混到一起。这样你的室友就能够接受了。
结合上面webpack的工作流程，可以这样说：webpack分析大型项目的结构即分析这些菜是哪些口味；找到浏览器不能直接运行的模块，即分析哪些是你室友不能接受的口味；将浏览器不能识别的文件转换和打包为合适的格式供浏览器识别即将菜分类打包让你的室友可以接受。 结合上面的图，应该把 Webpack 的运行流程搞清楚了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
白帽子讲浏览器安全
钱文祥 / 电子工业出版社 / 2016-3 / 79.00元
浏览器是重要的互联网入口，一旦受到漏洞攻击，将直接影响到用户的信息安全。作为攻击者有哪些攻击思路，作为用户有哪些应对手段？在《白帽子讲浏览器安全》中我们将给出解答，带你了解浏览器安全的方方面面。《白帽子讲浏览器安全》兼顾攻击者、研究者和使用者三个场景，对大部分攻击都提供了分析思路和防御方案。《白帽子讲浏览器安全》从攻击者常用技巧的“表象”深入介绍浏览器的具体实现方式，让你在知其然的情况下也知其所以......一起来看看 《白帽子讲浏览器安全》 这本书的介绍吧!
