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