webpack-安裝踩坑

前提：安裝了 Node.js

Tips:

• webpack能夠全局安裝或者本地安裝。官網上不推薦全局安裝，由於這會將你項目中的 webpack 鎖定到指定版本，而且在使用不一樣的 webpack 版本的項目中，可能會致使構建失敗。
• 全局和局部都安裝webpack,這樣命令行內直接使用webpack命令，使用的是全局的，npm運行的是局部的webpack
• 全局安裝是爲了能夠在命令行中使用webpack，項目安裝是爲了讓項目發佈後，其餘人能夠在直接使用npm命令時使用與你相同版本的webpack。

全局安裝webpack

$ npm install -g webpack

全局安裝的包都在 /usr/local/lib/node_modules 文件夾下(OS X)。安裝後可執行文件默認放在/usr/local/bin，庫文件默認放在/usr/local/lib，配置文件默認放在/usr/local/etc。bin目錄通常存編譯好的dll庫文件和可執行文件，bin是二進制binrary的英文縮寫。(查看bin目錄下是各類軟連接，git，npm等)

安裝失敗

通常有三種可能：

• 檢查你node的版本號，若是版本號太低，升級爲最新版本。
• 網絡問題，能夠考慮使用cnpm來安裝（淘寶實時更新的鏡像）,具體能夠登陸cnpm的官方網站學習。
• 權限問題，在Linux、Mac安裝是須要權限，若是你是Windows系統，主要要使用以管理員方式安裝。

安裝成功，運行失敗

多是環境變量配置的緣由，嘗試的解決方式和結果：

• 直接在終端下，設置環境變量export NODE_PATH="/usr/local/lib/node_modules"， 後在項目根目錄運行webpack，仍然報錯。在項目根目錄下輸入指令 echo $NODE_PATH 輸出結果爲空。
• 在項目根目錄下設置環境變量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 能輸出結果！

局部安裝webpack

$ npm install webpack --save-dev

Tips：

1. 局部 npm install 安裝包以前，須要在當前目錄下執行初始化。也就是說當前目錄必須有package.json文件，或者你在當前的目錄下人爲的創建好node_modules目錄。

   • 項目中只有package.json，文件內容不能爲空，不能爲null,至少應該包含一個{},會如指望安裝，安裝完成後會生成node_modules文件夾，package.json中新增devDependencies。
   • 項目中只有node_modules文件夾，能夠正常下載到文件夾中,不會生成package.json,可能會生成package-lock.json(取決於npm版本)。再初始化的時候，webpack及版本號默認添加在dependencies，而不是devDependencies。
   • 二者都沒有，npm會一直向上尋找package.json或者node_modules文件夾所在目錄，最終終止在用戶根目錄。
2. 若是你使用的是 npm 5，你可能還會在目錄中看到一個 package-lock.json 文件(能夠理解爲npm5以上，有包下載到node_modules，就會生成package-lock.json)。
3. package.json中的name屬性不能爲「webpack」
4. 本地安裝 webpack 後,咱們也並不能在命令行中使用 webpack 命令。由於環境變量中沒有對應的路徑,提示：webpack command is not found.
5. 若是不帶參數或者帶--save，會在dependencies這裏。卸載的時候清空dependencies。--save-dev在"devDependencies"，卸載清空devDependencies。卸載不用帶參數。

那麼，咱們應該如何使用局部webpack命令呢？

1. 利用package.json設置中的scripts屬性。定義在package.json裏面的腳本，稱爲 npm 腳本
在 npm scripts 中咱們能夠經過包名直接引用本地安裝的 npm 包的二進制版本，而無需編寫包的整個路徑。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lwebpack": "webpack"
}

在命令行下， $ npm run，而後回車，就會顯示全部可使用的命令。npm run 是npm run-script的縮略。
start、test、stop和restart這樣的特殊腳本能夠直接執行， npm [xx]， 其它的腳本任務須要用 npm run xx來執行。
經過向 npm run [命令]和參數之間添加兩組兩個中橫線，能夠將自定義參數傳遞給 npm 腳本，例如：npm run lwebpack -- --v。

npm 腳本原理

1.每當執行npm run，就會自動新建一個 Shell，在這個 Shell 裏面執行指定的scripts腳本命令。所以，只要是 Shell（通常是 Bash）能夠運行的命令，就能夠寫在 npm 腳本里面。

2.比較特別的是，npm run新建的這個 Shell，執行scripts的時候，會將當前目錄的node_modules/.bin子目錄加入PATH變量，執行結束後，再將PATH變量恢復原樣。

3.這意味着，當前目錄的node_modules/.bin子目錄裏面的全部腳本，在scripts中均可以直接用腳本名，而沒必要加上路徑。好比，當前項目的依賴裏面有 Mocha，只要直接寫mocha test就能夠了。

"test": "./node_modules/.bin/mocha test"
//能夠簡寫爲
"test": "mocha test"

因爲 npm 腳本的惟一要求就是能夠在 Shell 執行，所以它不必定是 Node 腳本，任何可執行文件均可以寫在裏面。

2. 自定義shell命令來操做

$ alias lwebpack="node_modules/.bin/webpack" 或,
$ alias lwebpack =PATH=$(npm bin):$PATH

3. 能夠運行在初始安裝的 webpack 包中的 webpack 二進制文件（./node_modules/.bin/webpack）。直接在cli裏運行：

$ node_modules/.bin/webpack -v
$ node_modules/webpack/bin/webpack.js -v

本地安裝 webpack 後，node_modules中會生成一個.bin文件夾，能夠發現裏面有webpack相關的幾個文件。這裏的 webpack 是 node_modules/webpack/bin 這個包裏面 webpack.js可執行文件 的軟連接 。直接在.bin 目錄下使用./webpack -v,或者在bin目錄下使用./webpack.js -v，須要加[ . / ], 外層則可加，可不加。
 
注意:當在 windows 中經過調用路徑去調用 webpack 時，必須使用反斜線\
 

4. $ node ./node_modules/.bin/webpack -v 同理，執行 webpack 的可執行 js ，這樣執行的好處是能夠加一些 js 的標記變量 flag ，例如調大 old memory size 或者進行 chrome debug (暫時還沒懂什麼意思，不過這也是一種應用方法)
5. 還能夠：

$ `npm bin`/webpack -v

6. npm 5.2.0以上，會安裝一個新的包npx。npx是一個npm包執行器，旨在提升從npm註冊表使用軟件包的體驗。

$ npx webpack -v

7. 新建一個index.js，內容以下：

const webpack = require('webpack');
webpack();

而後在cli裏運行$ node index.js便可

 
8. 利用package.json的bin屬性和npm link
網上查的時候有人提到了bin這個屬性，這裏，花了一些時間，終於好像弄清楚了。

package.json中bin：
不少包都有一個或多個可執行模塊，但願用戶安裝包的同時，把這些可執行模塊配置到PATH中，npm讓這個工做變得十分簡單（實際上npm自己也是經過bin屬性安裝爲一個可執行命令的）
bin，是一個命令名和本地文件名的映射。在npm安裝某個包(模塊)時，會查找這個包中package.json文件是否包含bin屬性，若是有，會爲bin中配置的可執行文件建立一個軟連接，名字是bin中的key值，安裝方式不一樣，連接位置不一樣。若是是全局安裝，連接會放到prefix/bin（對於windows系統，默認會在C:UsersusernameAppDataRoamingnpm目錄下，OS X系統中在usr/local/bin，連接到usr/local/lib/node_modules/包下的對應文件），這使你能夠直接在命令行執行key對應命令。若是是本地(局部)安裝，則會在項目內的./node_modules/.bin/目錄下建立一個軟連接，指向node_modules/包下對應可執行文件。
若是你只有一個可執行文件，那麼它的名字應該和包名相同，此時只須要提供這個文件路徑(字符串)，如： "bin": "./path/to/program"。
(實驗：在demo中package.json中添加bin，執行npm install，不行，什麼軟連接都沒有；內容都刪除只留下package.json而後npm intall，也不行。若是想實驗這個功能，能夠實驗性的安裝本身本地的包，使用相對路徑。如 npm install ../project)

npm link ,  create a global symbolic link to the current folder.
若是package.json中沒有bin，單獨使用npm link：只在/usr/local/lib/node_modules/下生成了一個連接指向項目目錄，連接的名字package.json中的name.
結合bin使用npm link：在/usr/local/lib/node_modules中新生成了一個軟連接，（名字是package.json的name？仍是項目名？經實驗是name）指向項目文件夾。而且，在/usr/local/bin中新生成了一個軟連接(bin中的key)，指向/usr/local/lib/node_modules/（name）/下bin指定的文件。
(兩個不一樣版本webpack項目中，設置link同一個名字,(若是link4.0版本，哪裏都4.0，若是link3.0，則有4.0的4.0，其餘3.0. 設置的覆蓋先設置的)

安裝指定版本

$ npm install webpack@version

最新體驗版本

若是你熱衷於使用最新版本的 webpack，你可使用如下命令，直接從 webpack 的倉庫中安裝：

$ npm install webpack@beta
$ npm install webpack/webpack#<tagname/branchname>

安裝這些最新體驗版本時要當心！它們可能仍然包含 bug，所以不該該用於生產環境。

卸載

$ npm uninstall webpack -g ,//沒試
$ npm uninstall webpack