[Webpack] 前端打包工具(1)-前置

F2E / Module bundler / nvm & npm

圖片來源： https://webpack.js.org/

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 ，安裝步驟：

1. 卸載任何現有的 node.js 版本
2. 刪除現有的npm安裝位置（C:\Users\<user>\AppData\Roaming\npm）
3. 下載並執行安裝檔（最新 Releases 版本）
4. 開啟終端機， 輸入nvm 可查看相關指令：

# 安裝/移除特定 Node.js 版本：
nvm install/uninstall [version]
nvm install 13.2.0

# 已安裝的 Node.js 清單(會顯示目前的使用版本)：
nvm ls
nvm list

目前的使用版本為：12.6.0

# 切換 Node.js 版本：
nvm use [version]
nvm use 13.2.0

5. 安裝最新 Node.js 版本：
nvm install latest

6. 檢查版本，出現版本號即表示安裝成功：

nvm version
node -v

nvm 版本：1.1.7 , node 版本：v12.6.0

▎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 版本：6.13.1

▎指令

同理，在終端機輸入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)-概念

官方文檔

概念

參考資料

[Node.JS] 在 Windows 下使用 nvm 切換 Node 版本
npm-wiki