背後靈魂 webpack (1) - 建置環境

一個工具的出現，一定有他被創造的原因。回顧一下剛開始學網頁時，常常都是一包 HTML + CSS + JavaScript 就搞定，而這三個也正是網頁的主要核心。

隨著時代進步，現在開發常伴隨著 Pug、Sass 又或是框架，這些東西非常方便也加快了開發速度，但我們的瀏覽器畢竟只吃上面三種檔案，最後一刻我們都是要透過終端機打上 npm run build 來編譯出合格的檔案。

而在我們背後做這些事情的正是 webpack。

webpack 官網

webpack 的核心功能是編譯 JavaScript，但只有他一位你可能會嫌不夠，因此常常會搭配不同的 loader 與 plugin，來讀取不同的檔案做到加減擴充的功能。

而使用 webpack，必較常用以下這些功能：

• 解析、編譯各式樣板
  Ex： Pug 到 HTML、Sass 到 CSS、框架到 JavaScript
• 壓縮、優化程式碼
• 打包新的語法並兼容舊瀏覽器
• HMR (hot module replacement)
  儲存後即時更新，不用刷新網頁

接著我們進入安裝的步驟～

簡易配置流程

1. 確認 Node 是否安裝過。

$ node --version

沒安裝的話可以參考：

• nvm：快速安裝、切換不同版本的 Node.js、
• NVM, the Easiest Way to Switch Node.js Environments on Your Machine in a Flash

2. 新增專案資料夾在路徑下，並且進入。

$ mkdir webpack-demo
$ cd webpack-demo

3. 安裝 npm 套件管理工具，沒帶入 -y 則需要一步一步打上專案資訊。

$ npm init -y

4. 安裝 webpack，dev 代表安裝在開發環境。

$ npm install webpack webpack-cli --save-dev 

這時候我們的專案架構應該是，這三個主要紀錄目前專案下使用的套件：

webpack-demo
  |- package.json
  |- package-lock.json
  |- /node_modules

5. 新增 index.html 與 /src/index.js 在我們的專案下，src 資料夾放開發用檔案。

6. 新增 webpack 配置文件 webpack.config.js，可以看到有幾個屬性。

• entry：webpack 打包的注入點，通常只會有一個檔案
• output：打包出來的等等設定
• filename：檔案名稱
• path：輸出路徑

path 因為要兼容不同的系統環境，欄位需填寫絕對路徑，__dirname 為 Node 的環境下附屬的，可以取得當下資料夾的絕對路徑，path.resolve 則是把資料夾的絕對路徑和產出的 dist 資料夾合併起來。

7. 編輯package.json，在 scripts 處加上我們的 webpack 運行指令。

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack"
},

8. 在終端機打上 npm run build 後，可以看到專案下多了一個 dist 資料夾，裡面存了一隻 bundle.js 檔案，打開檔案拉到最後可以看到我們寫的 code。

最後把我們 HTML 檔案裡的 script 改掉就能夠運行摟！

<script src="./dist/bundle.js"></script>

簡單的配置流程就到這邊，下面會繼續優化我們的配置！

優化配置

編譯模式

如果眼尖的話會發現我們每次打包時都會報一個黃色的錯誤：

這個其實是提醒你可以透過設置開發或正式環境，來編譯不同需求的檔案。像是開發就不需要壓縮，追求及時同步等等。我們可以到 webpack.config.js 設置 mode：

這時候再打包一次，重新去看 bundle.js 檔案的話就會發現不同，他沒有把他壓縮成一行：

但每次打包前都要改 mode 實在是太麻煩了，也因此有個東西叫做環境變數，我們先把 mode 改為以下：

這樣就可以在運行的時候偵測從 package.json 帶過去的值，也當然我們必須更改 package.json 為：

開發時就使用 npm run serve，正式打包則是 npm run build。

如果使用 windows 系統開發的話，你可能會發現根本取不到環境變數啊（Ｘ這時候就需要在專案裡多安裝一個套件 cross-env

$ npm install --save-dev cross-env 

並且在環境變數前加上 cross-env：

這樣就可以安心開發啦！

開發不中斷

有使用過 CLI 建置專案過的話，一定知道每次儲存完網頁都會自動更新，但目前每改一次就要打一次指令非常麻煩，這時候我們在 package.json 的 script 裡加上 --watch 就可以持續編譯了！

結論

最後來統整一下，今天介紹了：

• 如何安裝 webpack
• 配置 webpack.config.js 文件
• 根據環境需求配置編譯模式
• 如何讓開發持續編譯不中斷

目前只介紹編譯 JavaScript 和一些配置優化，其實隱約可以感受到工具都是因為麻煩而被做出來的，下篇會繼續介紹 webpack 如何搭配 loader 與 plugin 做出更多功能。

下回文章：背後靈魂 webpack (2) — CSS 入門 loader & plugin

參考資料

安装