第一部分:概念
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)目目錄:
配置文件:
有了這個(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ù)
直接使用npm start 就可以了打包了
如果你想對(duì)應(yīng)的腳本名稱(chēng)不是start ,? 需要這樣用npm run {script name},如npm run webpack瞒爬,