资讯专栏INFORMATION COLUMN

webpack 大法好 ---- what`s webpack?(前言)

wwolf / 2328人阅读

摘要:原始的开发模式已经满足不了呈指数增长的需求了。它承担起了模块管理这一重要角色。是个前端小菜鸟,接触前端不到两年时间,去年毕业正式参加工作。目前就职于杭州边锋网络神盾局就是这么霸气。

对于刚进入前端领域的人,特别是还处于小白阶段的初学者来说,很多人对 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)毕业正式参加工作。目前就职于杭州边锋网络-神盾局(就是这么霸气)。最后有我个人的微信号,欢迎大家加我微信,可以一起聊聊技术啥的!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81616.html

相关文章

  • webpack 大法 ---- 基础概念与配置(1)

    摘要:不信你命令行里敲个试试敲敲敲当然了想直接运行命令,你需要将添加到系统变量啊。全局安装相同的,运行命令耐心等待安装完成后,你的系统变量里就存在命令了,你可以运行下试试。上诉如果有不懂的,欢迎留言。 再一次见面! Light 还是太太太懒了,距离上一篇没啥营养的文章已经过去好多天。今天为大家介绍介绍 webpack 最基本的概念,以及简单的配置,让你能快速得搭建一个可用的 webpack ...

    QLQ 评论0 收藏0
  • 浅析webpack源码之前言(一)

    为什么读webpack源码 因为前端框架离不开webpack,天天都在用的东西啊,怎能不研究 读源码能学到很多做项目看书学不到的东西,比如说架构,构造函数,es6很边缘的用法,甚至给函数命名也会潜移默化的影响等 想写源码,不看源码怎么行,虽然现在还不知道写什么,就算不写什么,看看别人写的总可以吧 知道世界的广阔,那么多插件,那么多软件开发师,他们在做什么,同样是写js的,怎么他们能这么伟大 好奇...

    suosuopuo 评论0 收藏0
  • JavaScript系列(四) - 收藏集 - 掘金

    摘要:函数式编程前端掘金引言面向对象编程一直以来都是中的主导范式。函数式编程是一种强调减少对程序外部状态产生改变的方式。 JavaScript 函数式编程 - 前端 - 掘金引言 面向对象编程一直以来都是JavaScript中的主导范式。JavaScript作为一门多范式编程语言,然而,近几年,函数式编程越来越多得受到开发者的青睐。函数式编程是一种强调减少对程序外部状态产生改变的方式。因此,...

    cfanr 评论0 收藏0
  • 在没有DOM操作的日子里,我是怎么熬过来的(上)

    摘要:至于我为何要这么做,请听闰土娓娓道来。那么接下来,正文从这开始熟悉闰土的朋友都知道,我是从时代过来的前端,在刚接触和这类框架的时候,完全可以用一脸懵逼来形容我,最为贴切。作者闰土少年出处本博客的文章如无特殊说明,均为原创,转载请注明出处。 showImg(https://segmentfault.com/img/bVZjKW?w=670&h=442); 前言 在我动笔写这篇文章的时候,...

    shuibo 评论0 收藏0
  • 创建 Web 前端开发环境

    摘要:前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础。是目前最为流行的源代码管理网站。安装在继续学习前,你需要先将命令行安装到全局环境中。 Web 前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础。 本文介绍的工具有:NodeJS, NPM, Bower, Git 和 Gru...

    Sanchi 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<