Webpack
自動化打包網頁的腳本 (scripts)、樣式 (styles)、資源 (assets)、圖片 (images)
由於前端技術的發展,伴隨著各式各樣預處理器 (Preprocessor)以及框架 (Frameworks) 的出現,因此我們需要 Webpack 來幫忙處理及編譯全部的資源。現在,Webpack 已然成為前端必備的打包工具。
自己一開始學習也是一頭霧水,起初直接爬了官網,不知道為什麼,資料雖然很齊全,但就是有種原文書的感覺,進度緩慢就算了還常常有看沒懂...(深呼吸),後來透過各路大神們的文章一步一點的學習,哈~果然還是白話文好懂很多啊,以下是我的學習紀錄,希望/或許能幫助同樣糾結過的你。
# 預處理器(Preprocessor)
HTML: Haml、Markdown、Pug(Jade)
CSS:Less、SCSS/Sass、Stylus、PostCSS
JS: Babel、TypeScript 、 CoffeeScript、LiveScript
# 框架(Preprocessor)
目前較為主流的有:Angular.js、React.js、Vue.js
前置
Webpack 需要在 Node.js 環境下執行,在開始安裝之前,要確保已安裝了 Node.js 的最新版本。
※ 使用舊版本,可能會造成缺少功能或相關套件等問題。
如上圖所示,在安裝 Node.js 最新版本之前,我們可以先安裝 nvm(Node Version Manager)來做 Node.js 的版本管理,對於將來要在版本之間做切換或者版本更新都非常的有用。
安裝 nvm(Node Version Manager)
nvm 即 Node.js 版本管理工具,有助於安裝與管理不同版本的 Node.js。
▎Windows
使用 coreybutler / nvm-windows ,安裝步驟:
- 卸載任何現有的 node.js 版本
- 刪除現有的npm安裝位置(
C:\Users\<user>\AppData\Roaming\npm
) - 下載並執行安裝檔(最新 Releases 版本)
- 開啟終端機, 輸入
nvm
可查看相關指令:
# 安裝/移除特定 Node.js 版本:nvm install/uninstall [version]
nvm install 13.2.0
# 已安裝的 Node.js 清單(會顯示目前的使用版本):nvm ls
nvm list
# 切換 Node.js 版本:nvm use [version]
nvm use 13.2.0
5. 安裝最新 Node.js 版本:nvm install latest
6. 檢查版本,出現版本號即表示安裝成功:
nvm version
node -v
▎Mac OS/Linux
使用 creationix / nvm,安裝步驟請參考:nvm — 版本隨你切。
使用 npm(Node Package Manager)
在「前置」中有提到 Webpack 需要在 Node.js 環境下執行,而我們也透過 NVM 安裝了最新版本的 Node.js,接下來就可以使用 npm 來安裝 Webpack ,但新的疑問又來了,甚麼是 npm ? 來看看維基百科中的介紹:
npm 全稱 Node Package Manager,即 「node包管理器」
是 Node.js預設的、以 JavaScript 編寫的軟體套件管理系統。
npm 會隨著 Node.js 自動安裝,使用者可以通過 npm 命令下載並安裝指定的模組(套件)。 此外,還可以使用 npm 來管理本地專案的所需模組(套件)並自動維護依賴情況,也可以管理全域安裝的 JavaScript 工具。
▎版本
剛剛我們已經檢視過 nvm、Node.js 的版本了,npm 也不必再另外安裝,現在直接來檢視一下 npm 的版本:
npm --version
npm -v
有顯示版本號則表示已安裝成功!
▎指令
同理,在終端機輸入npm
可查看相關指令:
# 安裝/移除套件:npm install/uninstall [package]
npm i/un [package]
# 安裝專案中所有套件:npm install
# 更新套件:npm update [package]
# 更新專案中的所有套件npm update
# 顯示套件相關資訊:npm show [package]
關於 nvm、Node.js、npm
到這裡是不是更能瞭解 nvm、Node.js、npm 以及理解三者之間的關係了呢,這邊小結一下:
# nvm(Node Version Manager)
Node.js 版本管理工具,可以管理多個 Node.js 和 npm 的版本。
# Node.js
能夠在伺服器端運行 JavaScript 的開放原始碼、跨平台 JavaScript 執行環境(既是開發環境也是函式庫)。
# npm(Node Package Manager)
Node.js 的套件管理工具,可以管理 Node.js 的第三方套件。
相關文章
[Webpack] 前端打包工具(1)-前置
[Webpack] 前端打包工具(2)-安裝
[Webpack] 前端打包工具(3)-概念