注意:CMD要以管理員身份打開,否則在安裝webpack那一步一直報錯
默認 : C:\Windows\System32 --cmd.exe
什么是Node.js?
簡單的說 Node.js 就是運行在服務端的 JavaScript。 Node.js是一個基於 Chrome V8 引擎的 JavaScript 運行環境; Node.js使用一個事件驅動、非阻塞式 I/O 的模型,使其輕量且高效; Node.js的軟件包生態系統npm是全球最大的開源庫生態系統。
安裝教程
本機環境:Windows 10 64bit操作系統
1.下載安裝包
Node.js 官方網站下載:https://nodejs.org/en/download/
下載完成,安裝包如下:
2.安裝
雙擊打開安裝,下一步下一步即可:
安裝成功,測試安裝是否成功,運行CMD,分別輸入node -v 和 npm -v 分別查看node和npm的版本號,如下圖所示:
安裝完成后系統目錄如圖所示(其中,npm隨安裝程序自動安裝,作用就是對Node.js依賴的包進行管理):
3.配置npm在安裝全局模塊時的路徑和緩存cache的路徑
因為在執行例如npm install webpack -g等命令全局安裝的時候,默認會將模塊安裝在C:\Users\用戶名\AppData\Roaming路徑下的npm和npm_cache中,不方便管理且占用C盤空間,
所以這里配置自定義的全局模塊安裝目錄,在node.js安裝目錄下新建兩個文件夾 node_global和node_cache,如圖所示:
然后在cmd命令下執行如下兩個命令,配置路徑:
npm config set prefix "D:\Install\nodejs\node_global" npm config set cache "D:\Install\nodejs\node_cache"
執行命令,如下圖所示:
(輸入指令后,命令行閃一下,不會有任何提示)
執行完后,配置環境變量,分別新建用戶變量PATH和系統變量NODE_PATH,如下:
"此電腦"->“屬性”->"高級系統設置"->“環境變量” -> “系統變量”:新建一個變量名為 “NODE_PATH”, 值為“D:\Install\nodejs\node_global”,如下圖:
這是最重要的一點;在安裝webpack后出現'webpack' 不是內部或外部命令的問題 就是因為路徑不對
PATH和NODE_PATH全部設置為:D\Install\nodejs\node_global。
看到網上的設置方法為 :NODE_PATH屬性指向D:\Install\nodejs\node_global\node_modules,這樣設置並不對,就會導致報不是內部命令
“環境變量” -> “用戶變量”:編輯用戶變量里的Path,將相應npm的路徑(“C:\Users\用戶名\AppData\Roaming\npm”)改為:“D:\Install\nodejs\node_global”,如下:
配置完成。
4.安裝webpack及webpack-cli
在cmd命令下執行 npm i -g webpack webpack-cli 安裝webpack,如下圖所示:
前端包管理工具npm, bower and grunt
也可以切換到本地目錄在安裝一遍,當然全局安裝就可以了,
可以忽略本地安裝:因為我在D:\vue-exe\blue\es6\module 下練習項目,所以定為本地位置,命令:npm i webpack webpack-cli
安裝成功,自動生成文件夾如下所示:
在cmd命令下執行 webpack -v 查看webpack版本,如提示:
注意:安裝webpack 過程中報錯是因為沒在管理員下安裝
----------------------------------------------------------------------
wepack安裝命令
webpack和webpack-cli這兩個都需要裝上
這兩個是互相配合的,一開始就是兩個都需要裝
-g 全局安裝, i 是install 的簡寫
npm i -g webpack webpack-cli 全局安裝(可要任何位置安裝)
npm i webpack webpack-cli 本地安裝(在本地目錄下)
兩個本地,兩個全局,正常使用webpack時,這四個庫都要裝,當然全局的裝一遍就行了
web
--save 寫入到 dependencies 對象 -S就是--save
--save-dev 寫入到 devDependencies 對象
----------------------------------------------------------------------