資訊專(zhuān)欄INFORMATION COLUMN
摘要：原始的開(kāi)發(fā)模式已經(jīng)滿(mǎn)足不了呈指數(shù)增長(zhǎng)的需求了。它承擔(dān)起了模塊管理這一重要角色。是個(gè)前端小菜鳥(niǎo)，接觸前端不到兩年時(shí)間，去年畢業(yè)正式參加工作。目前就職于杭州邊鋒網(wǎng)絡(luò)神盾局就是這么霸氣。
對(duì)于剛進(jìn)入前端領(lǐng)域的人，特別是還處于小白階段的初學(xué)者來(lái)說(shuō)，很多人對(duì) webpack 并不熟知。就像 Light （對(duì)，我就是 Light）一樣，剛接觸前端，最關(guān)心的就是樣式和簡(jiǎn)單的交互了。那時(shí)候怎么會(huì)知道像 webpack 這樣的高級(jí)東西??！最開(kāi)心的不就是寫(xiě)幾行代碼，然后打開(kāi)HTML能在瀏覽器里看到期待的效果么？模塊化是什么鬼壓根不關(guān)心好嗎！
對(duì)于 Light 來(lái)說(shuō)，接觸 webpack 是開(kāi)始學(xué)習(xí)前端很久之后的事了（一直走野路子，沒(méi)上正道/(ㄒoㄒ)/~~）。記得那時(shí)候，第一次裝 node，第一次用 npm 裝模塊（被墻+不知道有鏡像=安裝總是失?。?，第一次敲 webpack 命令......太多的第一次了，跟進(jìn)洞房一樣激動(dòng)?。】傊?，接觸學(xué)習(xí)多了，就砸開(kāi)了前端新世界的大門(mén)。
扯了兩車(chē)蛋，得上點(diǎn)正菜了吧！不想當(dāng)廚師的程序員，不是個(gè)好產(chǎn)品！
那么，到底什么是 webpack？
偷偷百度一下，哦，Webpack 是當(dāng)下最熱門(mén)的前端資源模塊化管理和打包工具。Excuse me！你覺(jué)得我剛學(xué)兩個(gè)月前端，知道什么是模塊化么？知道我不知道你還不解釋清楚？別著急，聽(tīng)我一一道來(lái)：在很久很久以前，一個(gè)王子愛(ài)上了一個(gè)公主，可是，邪惡的女王......呸呸呸！跑題了。前端！在很久很久以前，并沒(méi)有模塊化開(kāi)發(fā)的思想，就像我們自己剛開(kāi)始學(xué)習(xí)時(shí)候一樣，目的就是為了完成最簡(jiǎn)單的重構(gòu)和交互。在 Light 還不知道什么是淘寶的時(shí)候，大家這樣擼起袖子搞是可以的，可是隨著前端頁(yè)面功能越來(lái)越強(qiáng)，應(yīng)用越來(lái)越大。原始的開(kāi)發(fā)模式已經(jīng)滿(mǎn)足不了呈指數(shù)增長(zhǎng)的需求了。對(duì)于代碼來(lái)說(shuō)，復(fù)用性的要求也越來(lái)越高，因此，前端社區(qū)對(duì)于模塊化開(kāi)發(fā)的愿景也愈發(fā)強(qiáng)烈。正在這個(gè)時(shí)候，作為時(shí)代的產(chǎn)物，npm 應(yīng)運(yùn)而生。它承擔(dān)起了模塊管理這一重要角色。簡(jiǎn)而言之，就是大家都往 npm 那里放進(jìn)去我們自己寫(xiě)的模塊，由它來(lái)幫忙管理。任何人都可以從它那下載別人上傳的模塊。就好像你在建一座高墻，一會(huì)需要大塊一點(diǎn)的磚，一會(huì)又需要三角形的磚，而這些磚可能在以前有人幫你已經(jīng)造好了，你只需要去 npm 那里運(yùn)過(guò)來(lái)就可以直接使用。要是你自己也想造塊磚給別人用，你只要拿去 npm 那里托管就行。
這樣的話(huà)，不用自己造每一塊磚了，是不是砌墻搬磚也就不會(huì)那么辛苦了？
現(xiàn)在，磚是有了，但要怎么用呢？在我們進(jìn)行項(xiàng)目開(kāi)發(fā)的時(shí)候，往往需要用到相當(dāng)多的模塊。A模塊可能還依賴(lài)于B模塊，B模塊又依賴(lài)于其他的模塊......這么復(fù)雜的關(guān)系，這么多的模塊，難道得我們自己一點(diǎn)一點(diǎn)去拼湊么？就像一開(kāi)始寫(xiě)頁(yè)面一樣，需要什么插件或者庫(kù)，去網(wǎng)上找好寫(xiě)上地址。這么死板的工作很無(wú)聊??！就是怕你太無(wú)聊了，社區(qū)便出現(xiàn)了 webpack 這一神器。它的作用是什么？看它的尾巴！PACK！打包??！就是幫你把需要的模塊打包在一起，你只要按它定的規(guī)則去搬磚，它就會(huì)直接幫你把墻砌好裝飾好再一把甩到你跟前。對(duì)，就是這么直接。
ok！試水結(jié)束。這是 Light 第一篇要發(fā)表的文章O(∩_∩)O~~。要是看官一不小心勿進(jìn)了咱這黑店，我只能說(shuō)！交個(gè)朋友吧！你看我文章寫(xiě)得多么清新脫俗、淺顯易懂~ 一看就是個(gè)熱愛(ài)技術(shù)的好青年啊。
（畫(huà)風(fēng)突變，言歸正傳）
其實(shí)，很早之前，Light 就有寫(xiě)文章的沖動(dòng)。但是技術(shù)掌握的都不夠扎實(shí)，害怕自己寫(xiě)不出什么有價(jià)值的東西。但過(guò)得越久，學(xué)習(xí)得越多，就越來(lái)越發(fā)現(xiàn)寫(xiě)文章是多么重要的一件事情。而且，寫(xiě)文章的好處多多?。∫粊?lái)可以溫故知新，二來(lái)，要是能幫助到別人，哪怕是一點(diǎn)點(diǎn)，也是很有成就感的啊。所以，Light 決定開(kāi)始慢慢養(yǎng)成寫(xiě)文章的習(xí)慣。希望自己能堅(jiān)持下去，然后寫(xiě)越來(lái)越多對(duì)大家真正有用的東西。下節(jié)介紹下 webpack 的基本配置吧。
哦，對(duì)，忘了自我介紹了。Light 是個(gè)前端小菜鳥(niǎo)，接觸前端不到兩年時(shí)間，去年（2016）畢業(yè)正式參加工作。目前就職于杭州邊鋒網(wǎng)絡(luò)-神盾局（就是這么霸氣）。最后有我個(gè)人的微信號(hào)，歡迎大家加我微信，可以一起聊聊技術(shù)啥的！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/81616.html
摘要：不信你命令行里敲個(gè)試試敲敲敲當(dāng)然了想直接運(yùn)行命令，你需要將添加到系統(tǒng)變量啊。全局安裝相同的，運(yùn)行命令耐心等待安裝完成后，你的系統(tǒng)變量里就存在命令了，你可以運(yùn)行下試試。上訴如果有不懂的，歡迎留言。 再一次見(jiàn)面！ Light 還是太太太懶了，距離上一篇沒(méi)啥營(yíng)養(yǎng)的文章已經(jīng)過(guò)去好多天。今天為大家介紹介紹 webpack 最基本的概念，以及簡(jiǎn)單的配置，讓你能快速得搭建一個(gè)可用的 webpack ...
為什么讀webpack源碼 因?yàn)榍岸丝蚣茈x不開(kāi)webpack，天天都在用的東西啊，怎能不研究 讀源碼能學(xué)到很多做項(xiàng)目看書(shū)學(xué)不到的東西，比如說(shuō)架構(gòu)，構(gòu)造函數(shù)，es6很邊緣的用法，甚至給函數(shù)命名也會(huì)潛移默化的影響等 想寫(xiě)源碼，不看源碼怎么行，雖然現(xiàn)在還不知道寫(xiě)什么，就算不寫(xiě)什么，看看別人寫(xiě)的總可以吧 知道世界的廣闊，那么多插件，那么多軟件開(kāi)發(fā)師，他們?cè)谧鍪裁?，同樣是?xiě)js的，怎么他們能這么偉大 好奇...
摘要：函數(shù)式編程前端掘金引言面向?qū)ο缶幊桃恢币詠?lái)都是中的主導(dǎo)范式。函數(shù)式編程是一種強(qiáng)調(diào)減少對(duì)程序外部狀態(tài)產(chǎn)生改變的方式。 JavaScript 函數(shù)式編程 - 前端 - 掘金引言 面向?qū)ο缶幊桃恢币詠?lái)都是JavaScript中的主導(dǎo)范式。JavaScript作為一門(mén)多范式編程語(yǔ)言，然而，近幾年，函數(shù)式編程越來(lái)越多得受到開(kāi)發(fā)者的青睞。函數(shù)式編程是一種強(qiáng)調(diào)減少對(duì)程序外部狀態(tài)產(chǎn)生改變的方式。因此，...
摘要：至于我為何要這么做，請(qǐng)聽(tīng)閏土娓娓道來(lái)。那么接下來(lái)，正文從這開(kāi)始熟悉閏土的朋友都知道，我是從時(shí)代過(guò)來(lái)的前端，在剛接觸和這類(lèi)框架的時(shí)候，完全可以用一臉懵逼來(lái)形容我，最為貼切。作者閏土少年出處本博客的文章如無(wú)特殊說(shuō)明，均為原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處。 showImg(https://segmentfault.com/img/bVZjKW?w=670&h=442); 前言 在我動(dòng)筆寫(xiě)這篇文章的時(shí)候，...
摘要：前端開(kāi)發(fā)涉及多種工具，這里將常用工具的安裝和配置進(jìn)行說(shuō)明，提供了詳細(xì)的說(shuō)明，為后繼的開(kāi)發(fā)創(chuàng)建一個(gè)堅(jiān)實(shí)的基礎(chǔ)。是目前最為流行的源代碼管理網(wǎng)站。安裝在繼續(xù)學(xué)習(xí)前，你需要先將命令行安裝到全局環(huán)境中。 Web 前端開(kāi)發(fā)涉及多種工具，這里將常用工具的安裝和配置進(jìn)行說(shuō)明，提供了詳細(xì)的說(shuō)明，為后繼的開(kāi)發(fā)創(chuàng)建一個(gè)堅(jiān)實(shí)的基礎(chǔ)。 本文介紹的工具有：NodeJS, NPM, Bower, Git 和 Gru...
閱讀 2384·2021-11-24 10:33
閱讀 1451·2019-08-30 15:43
閱讀 3338·2019-08-29 17:24
閱讀 3552·2019-08-29 14:21
閱讀 2283·2019-08-29 13:59
閱讀 1790·2019-08-29 11:12
閱讀 2894·2019-08-28 18:00
閱讀 1926·2019-08-26 12:17
