对于刚进入前端领域的人，特别是还处于小白阶段的初学者来说，很多人对 webpack 并不熟知。就像 Light （对，我就是 Light）一样，刚接触前端，最关心的就是样式和简单的交互了。那时候怎么会知道像 webpack 这样的高级东西啊！最开心的不就是写几行代码，然后打开HTML能在浏览器里看到期待的效果么？模块化是什么鬼压根不关心好吗！

对于 Light 来说，接触 webpack 是开始学习前端很久之后的事了（一直走野路子，没上正道/(ㄒoㄒ)/~~）。记得那时候，第一次装 node，第一次用 npm 装模块（被墙+不知道有镜像=安装总是失败），第一次敲 webpack 命令......太多的第一次了，跟进洞房一样激动啊！总之，接触学习多了，就砸开了前端新世界的大门。

扯了两车蛋，得上点正菜了吧！不想当厨师的程序员，不是个好产品！

那么，到底什么是 webpack？

偷偷百度一下，哦，Webpack 是当下最热门的前端资源模块化管理和打包工具。Excuse me！你觉得我刚学两个月前端，知道什么是模块化么？知道我不知道你还不解释清楚？别着急，听我一一道来：在很久很久以前，一个王子爱上了一个公主，可是，邪恶的女王......呸呸呸！跑题了。前端！在很久很久以前，并没有模块化开发的思想，就像我们自己刚开始学习时候一样，目的就是为了完成最简单的重构和交互。在 Light 还不知道什么是淘宝的时候，大家这样撸起袖子搞是可以的，可是随着前端页面功能越来越强，应用越来越大。原始的开发模式已经满足不了呈指数增长的需求了。对于代码来说，复用性的要求也越来越高，因此，前端社区对于模块化开发的愿景也愈发强烈。正在这个时候，作为时代的产物，npm 应运而生。它承担起了模块管理这一重要角色。简而言之，就是大家都往 npm 那里放进去我们自己写的模块，由它来帮忙管理。任何人都可以从它那下载别人上传的模块。就好像你在建一座高墙，一会需要大块一点的砖，一会又需要三角形的砖，而这些砖可能在以前有人帮你已经造好了，你只需要去 npm 那里运过来就可以直接使用。要是你自己也想造块砖给别人用，你只要拿去 npm 那里托管就行。

这样的话，不用自己造每一块砖了，是不是砌墙搬砖也就不会那么辛苦了？

现在，砖是有了，但要怎么用呢？在我们进行项目开发的时候，往往需要用到相当多的模块。A模块可能还依赖于B模块，B模块又依赖于其他的模块......这么复杂的关系，这么多的模块，难道得我们自己一点一点去拼凑么？就像一开始写页面一样，需要什么插件或者库，去网上找好写上地址。这么死板的工作很无聊啊！就是怕你太无聊了，社区便出现了 webpack 这一神器。它的作用是什么？看它的尾巴！PACK！打包啊！就是帮你把需要的模块打包在一起，你只要按它定的规则去搬砖，它就会直接帮你把墙砌好装饰好再一把甩到你跟前。对，就是这么直接。

ok！试水结束。这是 Light 第一篇要发表的文章O(∩_∩)O~~。要是看官一不小心勿进了咱这黑店，我只能说！交个朋友吧！你看我文章写得多么清新脱俗、浅显易懂~ 一看就是个热爱技术的好青年啊。

（画风突变，言归正传）

其实，很早之前，Light 就有写文章的冲动。但是技术掌握的都不够扎实，害怕自己写不出什么有价值的东西。但过得越久，学习得越多，就越来越发现写文章是多么重要的一件事情。而且，写文章的好处多多啊！一来可以温故知新，二来，要是能帮助到别人，哪怕是一点点，也是很有成就感的啊。所以，Light 决定开始慢慢养成写文章的习惯。希望自己能坚持下去，然后写越来越多对大家真正有用的东西。下节介绍下 webpack 的基本配置吧。

哦，对，忘了自我介绍了。Light 是个前端小菜鸟，接触前端不到两年时间，去年（2016）毕业正式参加工作。目前就职于杭州边锋网络-神盾局（就是这么霸气）。最后有我个人的微信号，欢迎大家加我微信，可以一起聊聊技术啥的！