這篇記錄架設一個webpack專案之前的前置作業,我只會vue,所以這裡例子用vue說明。
主要4個步驟。
1. 安裝node.js (完成後自動安裝npm (Node Package Manager)
2. 創建專案資料夾(directory)
3. 初始化專案
4. 使用npm安裝vue
1. 安裝node.js (完成後自動安裝npm (Node Package Manager)
選擇基本款的windows安裝包即可(使用win10x64)
安裝完成之後使用cmd(命令提示字元)檢查版本號,有東西就表示安裝成功。
node –v
如果安裝完卻得到 'node' 不是內部或外部命令、可執行的程式或批次檔 的錯誤訊息,
主要應該是因為環境變數沒有設定的問題,
具體怎麼操作直接google錯誤訊息就會有很多相關文章,這邊不贅述。
提到npm,就順便提一下nvm(Node Version Manager)
NVM是 Node.js 的版本管理工具。
由於Node.js 發展快速,迭代頻繁,
所以如果會有同時間在不同專案配置不同版本Node.js的需求,
使用NVM會比較方便進行版控與版本切換。
2. 創建專案資料夾(directory)
嗯,就是,建一個專案資料夾。不過記得別直接把名字取叫做webpackXDDD
3. 初始化專案
npm init -y
-y 會將需要回答的問題一次性略過, package.json 中,日後可以修改。
結束之後npm會幫我們自動新增一個package.json的檔案。
可以看一下package.json,
先簡單配置個script指令build
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC"
}
4. 使用npm安裝vue
npm install vue --save
執行完成後會自動安裝node_modules,
其中,install 也可以簡寫為 i
安裝時,除了 --save,也可以寫簡稱 -S,表示現在安裝的這個套件,到了正式環境也依然會用到。
--save-dev / -D: 安裝開發時用的工具
--save / -S : 上線時(正式環境)必要的套件
安裝完成之後都可以在 package.json中看到套件及其版本號,
dependencies中放的是到了正式環境也要用的套件,也就是你下--save 或是 -S的,
devDependencies則是放--save-dev或-D的套件。
如果只有npm i (pluginName),那麼默認是 npm i (pluginName) --save,
會被歸類在package.json的 dependencies裏頭。
到目前為止,都還沒辦法npm run build,
因為(我覺得)打包的精隨,webpack.config.js你還沒配置!!
下一篇來講其他細節與webpack.config.js。
參考資料
[Node.js] 安裝 NVM (Node Version Manager) 來切換 Node.js 版本 for Windows