跟著教程邊學(xué)邊打代碼，建立項(xiàng)目，在不同的電腦，創(chuàng)建webpack項(xiàng)目時(shí)候，分別遇到不一樣的坑。
電腦 A :
環(huán)境：Mac
? ? ? ? ?node -v: v0.12.4
? ? ? ? ?npm －v: 2.10.1
按著教程寫(xiě)完index.js,sub.js，安裝好各種包，然后在項(xiàng)目根目錄運(yùn)行webpack后，馬上遇到一個(gè)坑
指令webpack安裝的時(shí)候明明是全局的 “npm install -g webpack”，但是仍然報(bào)出了這樣的錯(cuò)誤 根據(jù)路徑，ls查看webpack目錄下是存在NodeTemplatePlugin這個(gè)插件的，查找了一下原因，應(yīng)該是沒(méi)有設(shè)置環(huán)境變量導(dǎo)致的。具體在這里
按照別人的方法：
1.直接在終端下，設(shè)置環(huán)境變量export NODE_PATH="/usr/local/lib/node_modules" 后在項(xiàng)目根目錄運(yùn)行webpack，仍然報(bào)錯(cuò)。在項(xiàng)目根目錄下輸入指令 echo $NODE_PATH 輸出結(jié)果為空。
2.在項(xiàng)目根目錄下設(shè)置環(huán)境變量export NODE_PATH="/usr/local/lib/node_modules" 后在項(xiàng)目根目錄運(yùn)行webpack，成功！在項(xiàng)目根目錄下輸入指令 echo $NODE_PATH 能輸出結(jié)果。但是當(dāng)新開(kāi)一個(gè)終端進(jìn)入項(xiàng)目，并在項(xiàng)目根目錄下運(yùn)行webpack指令，仍然報(bào)錯(cuò)，輸入指令 echo $NODE_PATH 輸出結(jié)果為空。說(shuō)明之前設(shè)置的環(huán)境變量只是一個(gè)臨時(shí)的值！ 以上兩種方法都不可以很好的解決問(wèn)題。
繼續(xù)尋找解決方案： 在~/.bash_profile中添加如下設(shè)置： export NODE_PATH="/usr/local/lib/node_modules" 保存退出。
運(yùn)行webpack,成功！輸入指令 echo $NODE_PATH 能輸出結(jié)果！
ps：在終端下 vim ~/.bash_profile i #進(jìn)入編輯
? ? ? ?輸入語(yǔ)句 export NODE_PATH="/usr/local/lib/node_modules"
? ? ? ?esc :wq
? ? ? ?source ~/.bash_profile ?＃讓~/.bash_profile馬上生效！
最終成功運(yùn)行項(xiàng)目
晚上用另外一臺(tái)電腦，重新建立webpack項(xiàng)目，出現(xiàn)了各種狀況
環(huán)境：mac
? ? ? ? ?node -v: v5.7.0
? ? ? ? ?npm -v: v3.6.0
跟這教程，建立項(xiàng)目，安裝webpack，html-webpack-plugin 兩個(gè)包后，運(yùn)行webpack, 報(bào)錯(cuò)。按照上面的解決方法，解決問(wèn)題。好！繼續(xù)！問(wèn)題陸續(xù)的出現(xiàn)了...
安裝webpack-dev-server，報(bào)錯(cuò)報(bào)錯(cuò)...嘗試忽略它，繼續(xù)往前走，配置webpack-dev-server，在項(xiàng)目根目錄下輸入npm start。最后...還是走不下去，各種報(bào)錯(cuò)！
它說(shuō)我版本太低太低?。。。?！ 各種翻閱資料，有人說(shuō)把webpack版本裝到2.0.1beta解決問(wèn)題；有人說(shuō)因?yàn)閚ode到了5.x這些包裝的時(shí)候出現(xiàn)各種狀況，需要降低版本，還有各種各樣的解釋……
就這樣，我把webpack裝了好多遍，即使換到2.0.1beta依舊沒(méi)有解決問(wèn)題；那好吧，我降低node版本咯～ 竟然竟然在我換版本的時(shí)候node掛了，又出現(xiàn)了另外一個(gè)狀況。在這種重重復(fù)復(fù)裝了node，npm后，又卸載，重新再裝node，npm后，又卸載…… 搞了好久，最后成功了。
總結(jié)一下：
1.webpack在全局安裝， webpack-dev-server死活不兼容，根本跑不起來(lái)（說(shuō)版本太低了，但是這怎么解決依舊沒(méi)有找到解決方案，有待解決）
結(jié)論：webpack還是局部安裝吧！
2.webpack在局部安裝，假設(shè)package.json 里面的name為：webpack，那很好又報(bào)錯(cuò)了，如圖：
將package.json 的name屬性修改為：webpackTest, 通過(guò)！
結(jié)論：package.json的name屬性不能跟webpack命令一樣
3.解決問(wèn)題2后，輸入命令webpack，提示webpack command is not found，如圖：
基于這情況，在package.json下，配置一下命令：
"scripts": {
? ?"test": "echo \"Error: no test specified\" && exit 1",
? ?"start": "webpack"
},
在終端下，執(zhí)行npm start，開(kāi)始編譯，生成build文件夾
繼續(xù)配置webpack-dev-server，package.json入面的配置就不是像教程那樣寫(xiě)了，應(yīng)該為這樣
"scripts": {
? ?"test": "echo \"Error: no test specified\" && exit 1",
? ?"start": "webpack",
? ?"dev": "webpack-dev-server --hot --inline"
}
在終端下，執(zhí)行npm run dev，通過(guò)?。。?！ 在瀏覽器里輸入localhost:8080, HelloWorld出現(xiàn)了?。。。。?！
終于項(xiàng)目又一次跑起來(lái)了...
心真累！
