webpack 3.5安裝打包小記

第一部分:概念

webpack是Javascript應(yīng)用程序的模塊打包器起暮。他處理程序時(shí),會(huì)遞歸的構(gòu)建一個(gè)依賴(lài)關(guān)系圖,包含應(yīng)用程序需要的每個(gè)模塊正塌,然后打包成少量的bundle-通常只有一個(gè),有瀏覽器加載恤溶。

四個(gè)核心概念:

入口(entry):? ? ? ? 確定需要打包的內(nèi)容乓诽,webpack的入口起點(diǎn)

輸出(output):打包后的內(nèi)容存放的位置

.filename 用于輸出文件的文件名;

.path目標(biāo)輸出目錄的絕對(duì)路徑咒程;

loader:兩個(gè)目標(biāo)1鸠天、識(shí)別出被對(duì)應(yīng)的loader轉(zhuǎn)換的那些文件。(test屬性)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2帐姻、轉(zhuǎn)換這些文件粮宛,添加到依賴(lài)圖中,并最終添加到bundle中


插件(plugins):在打包模塊的 “compilation” 和 “chunk” 生命周期執(zhí)行操作和自定義功能卖宠。

想要使用一個(gè)插件就需要先用(require),然后添加到plugins數(shù)組中巍杈,多數(shù)插件可以通過(guò)選項(xiàng)(option)自定義

第二部分:安裝

是全局安裝還是本地項(xiàng)目安裝好呢?

答:兩種安裝方式扛伍,到底該用哪一種筷畦,推薦本地安裝。全局安裝有一個(gè)版本管理問(wèn)題刺洒, 如果我們的項(xiàng)目中鳖宾,有的用webpack 1.0,有的用webpack2.0 逆航,而全局webpack 卻只有一個(gè)命令鼎文,那就不好辦了。本地安裝卻沒(méi)有這個(gè)問(wèn)題因俐。If you are using npm scripts in your project, npm will try to look for webpack installation in your local modules for which this installation technique is useful. 當(dāng)我們使用npm scripts 時(shí)拇惋,npm 會(huì)尋找本地安裝的webpack ,這就解決版本問(wèn)題周偎, 每一個(gè)項(xiàng)目下都使用本地安裝webpack , 互不影響。

全局安裝的方法:

npm install webpack -g

卸載全局安裝的webpack的方法:

npm uninstall webpack -g? ? ? ? (注意管理員權(quán)限 sudo去卸載)

安裝了全局后撑帖,需要先卸載蓉坎,然后在本地安裝。

在本地安裝之前先初始化下 npm init? ?然后本地安裝? ?npm install webpack --save-dev? 安裝完后在命令行輸入webpack 顯示


提示不是有效的命令

但是在你的項(xiàng)目的根目錄下有一個(gè)node_modules的文件生成胡嘿。

下面來(lái)構(gòu)建項(xiàng)目目錄:


項(xiàng)目目錄


main.js


Greeter.js

配置文件:

webpack.config.js

有了這個(gè)配置之后蛉艾,再打包文件,只需在終端里運(yùn)行webpack(非全局安裝需使用node_modules/.bin/webpack)命令就可以了衷敌,這條命令會(huì)自動(dòng)引用webpack.config.js文件中的配置選項(xiàng)勿侯,


打包成功!

沒(méi)有全局安裝的情況下缴罗,需要輸入很長(zhǎng)的命令來(lái)執(zhí)行任務(wù)很繁瑣罐监,我們可以利用npm scripts的任務(wù)引導(dǎo)功能來(lái)配置快捷的打包任務(wù)


package.json

直接使用npm start 就可以了打包了

如果你想對(duì)應(yīng)的腳本名稱(chēng)不是start ,? 需要這樣用npm run {script name},如npm run webpack瞒爬,

webpack.config.js


打包成功弓柱!
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市侧但,隨后出現(xiàn)的幾起案子矢空,更是在濱河造成了極大的恐慌,老刑警劉巖禀横,帶你破解...
    沈念sama閱讀 222,378評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件屁药,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡柏锄,警方通過(guò)查閱死者的電腦和手機(jī)酿箭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)趾娃,“玉大人缭嫡,你說(shuō)我怎么就攤上這事√疲” “怎么了妇蛀?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,983評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀(guān)的道長(zhǎng)笤成。 經(jīng)常有香客問(wèn)我评架,道長(zhǎng),這世上最難降的妖魔是什么炕泳? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,938評(píng)論 1 299
  • 正文 為了忘掉前任纵诞,我火速辦了婚禮,結(jié)果婚禮上培遵,老公的妹妹穿的比我還像新娘浙芙。我一直安慰自己登刺,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,955評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布茁裙。 她就那樣靜靜地躺著塘砸,像睡著了一般节仿。 火紅的嫁衣襯著肌膚如雪晤锥。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,549評(píng)論 1 312
  • 那天廊宪,我揣著相機(jī)與錄音矾瘾,去河邊找鬼。 笑死箭启,一個(gè)胖子當(dāng)著我的面吹牛壕翩,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播傅寡,決...
    沈念sama閱讀 41,063評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼放妈,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了荐操?” 一聲冷哼從身側(cè)響起芜抒,我...
    開(kāi)封第一講書(shū)人閱讀 39,991評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎托启,沒(méi)想到半個(gè)月后宅倒,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,522評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡屯耸,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,604評(píng)論 3 342
  • 正文 我和宋清朗相戀三年拐迁,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片疗绣。...
    茶點(diǎn)故事閱讀 40,742評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡线召,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出多矮,到底是詐尸還是另有隱情灶搜,我是刑警寧澤,帶...
    沈念sama閱讀 36,413評(píng)論 5 351
  • 正文 年R本政府宣布工窍,位于F島的核電站割卖,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏患雏。R本人自食惡果不足惜鹏溯,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,094評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望淹仑。 院中可真熱鬧丙挽,春花似錦肺孵、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,572評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至凳怨,卻和暖如春瑰艘,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背肤舞。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,671評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工紫新, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人李剖。 一個(gè)月前我還...
    沈念sama閱讀 49,159評(píng)論 3 378
  • 正文 我出身青樓芒率,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親篙顺。 傳聞我的和親對(duì)象是個(gè)殘疾皇子偶芍,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,747評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 最近在學(xué)習(xí) Webpack,網(wǎng)上大多數(shù)入門(mén)教程都是基于 Webpack 1.x 版本的,我學(xué)習(xí) Webpack 的...
    My_Oh_My閱讀 8,190評(píng)論 40 247
  • 無(wú)意中看到zhangwnag大佬分享的webpack教程感覺(jué)受益匪淺,特此分享以備自己日后查看德玫,也希望更多的人看到...
    小小字符閱讀 8,178評(píng)論 7 35
  • 寫(xiě)在開(kāi)頭 先說(shuō)說(shuō)為什么要寫(xiě)這篇文章, 最初的原因是組里的小朋友們看了webpack文檔后, 表情都是這樣的: (摘...
    Lefter閱讀 5,297評(píng)論 4 31
  • 很納悶為何在簡(jiǎn)書(shū)上從沒(méi)看見(jiàn)過(guò)關(guān)于高中的內(nèi)容匪蟀,讓我這個(gè)身處高中的簡(jiǎn)書(shū)愛(ài)好者頗失望。 關(guān)注簡(jiǎn)書(shū)三個(gè)月以來(lái)化焕,每...
    ooommmsss閱讀 1,598評(píng)論 7 8
  • 世間的一切自然現(xiàn)象都是固有的萄窜,不管你是否認(rèn)可我的觀(guān)點(diǎn)。自然現(xiàn)象對(duì)人的生活撒桨、生命健康是有影響的查刻,因此人們就不斷研究自...
    覺(jué)悟道閱讀 185評(píng)論 0 0