閑言碎語

在以前的公司從來都沒用過webpack，辭職之后靜下心來把自己當做一個初學者，開始一點點的查漏補缺。
看到最多的就是用webpack打個包。昨天自己上手安裝了一次，有出現一點小問題，不過后來找到了改正方法，現在分享一下簡單地安裝與配置方法。如果以后看到更多的webpack的操作，也會繼續更新這篇文章。

下載

要安裝webpack，是通過npm來安裝的，那么就必須先下載node.js。因為npm是隨同node.js一起的包管理工具。
1.首先到這里 下載對應版本的node.js。要是網址失效就百度一下node.js的官方下載網站。

這是window-64位版本的，請下載對應的版本

2.開始安裝node.js。

我是裝在其它盤，默認是在C盤

注：我裝在其它盤的原因是不想C盤越來越大，到時候還要用npm裝一些包，所以將node.js裝在了非C盤的位置。

默認安裝，直接點擊next

3.查看是否安裝成功。

調出控制臺

查看版本

安裝完成后，對應的目錄下是這樣的

環境配置

這里很重要！！
說明：這里的環境配置主要配置的是npm安裝的全局模塊所在的路徑，以及緩存cache的路徑，之所以要配置，是因為以后在執行類似：npm install express [-g] （后面的可選參數-g，g代表global全局安裝的意思）的安裝語句時，會將安裝的模塊安裝到【C:\Users\用戶名\AppData\Roaming\npm】路徑中，占C盤空間。（AppData文件夾是隱藏的，調成顯示隱藏文件及才能看到）
例如：我希望將全模塊所在路徑和緩存路徑放在我node.js安裝的文件夾中，則在我安裝的文件夾【D:\Develop\nodejs】下創建兩個文件夾【node_global】及【node_cache】如下圖：
（如果之前將node.js安裝到別的盤，那么這里的路徑也要相應的改變，不一定是D:\Develop\xxx，是根據自己的設置來的）

創建兩個文件夾，用來存放安裝的包和緩存

創建完兩個空文件夾之后，打開cmd命令窗口，輸入
npm config set prefix "D:\Develop\nodejs\node_global"
npm config set cache "D:\Develop\nodejs\node_cache"
(prefix和后面的路徑"xxxx"之間是有1個空格隔開的，cache與"xxxx"也是一樣，用一個空格隔開)

輸入對應的語句，設置安裝包文件夾和緩存文件夾

接下來設置環境變量，關閉cmd窗口，“我的電腦”-右鍵-“屬性”-“高級系統設置”-“高級”-“環境變量”

去設置環境變量

進入環境變量對話框，在【系統變量】下新建【NODE_PATH】，輸入【D:\Develop\nodejs\node_global\node_modules】，將【用戶變量】下的【Path】修改為【D:\Develop\nodejs\node_global】

系統變量新建NODE_PATH

去修改用戶變量的值

找到npm對應的默認路徑

輸入對應的路徑，再點確定

最后一路確定，關閉窗口出來。

測試

配置完后，安裝個module測試下，安裝webpack，打開cmd窗口，
輸入如下命令進行模塊的全局安裝：

npm install webpack -g -g是全局安裝的意思

輸入對應的安裝包名

PS:圖中安裝的是express模塊。而我們要安裝的是webpack，所以指令是npm install webpack -g,
解釋一下，為什么要-g全局安裝，因為之前我們已經修改了環境變量，我們剛進CMD的時候，盤符是C:\Users\JayYang(這個是個人的PC名)，不用-g來全局安裝，是會安裝到這個目錄下的node_modules文件夾中，不存在這個文件夾的話會自動生成。

node_global文件夾會出現這樣的文件，表示安裝成功

PS:我昨天遇到的問題是，已經修改了環境變量，也已經安裝完成，但是在對應的其他盤符的nodejs\node_global中沒有出現這些，反而還是在C:\User\XXX\AppData\Roaming\npm中出現了一個webpack的文件夾。而且導致我要用webpack打包我的文件的時候，控制臺顯示webpack不是內部命令，一直不知道問題出現在了哪里，甚至還重新裝了，但是并沒有用。

后來輸入npm config ls命令，檢查了我的設置，才發現，之前在設置模塊文件夾的時候，也就是在npm config set prefix "D:\Develop\nodejs\node_global"時，prefix與"xxx"之間沒有空格，導致設置失敗，默認的還是C:\User\xxxxx，但是自己已經手動更改了系統變量和個人環境變量的值，導致兩邊設置不統一，所以webpack一直用不了。但是這個設置不能通過卸載node.js，再重新安裝來恢復原樣（親測，刪了重裝沒有設置還是會保存之前的設置）。

最后查了好久，方法是刪除C:\Users\Administrator\.npmrc這個文件。如果.npmrc不在這個目錄下，就全局搜一下，Administrator是管理員用戶，一般我們設置的是個人用戶名，所以對應的是C:\User\XXX\.npmrc