[Tool Note] — 關於Webpack #1 - 第一次就上手

發表於 更新於 分類於 ， ， 文章字數： 6.3k 所需閱讀時間 ≈ 6 分鐘

關於Webpack

Introduction & 前言

記得前陣子接手別人的版面需要更改，那時候發現有個資料夾裡面有很多 .jade 檔，納悶了一下去爬文發現也是類似 CSS 的預處理器，像是 SASS/SCSS、Less、Stylus…等等，那時候算是第一次接觸，發現能像 SASS 一樣可以發揮懶人精神，除了不用寫結尾的 element 之外還能使用類似 template 的功能等等，最大的好處就是我同樣的地方要用不用重寫好幾次。

Jade 因為版權問題現已更名為 Pug

狗奴一定要用用看(誤

寫完的樣子跟一般的 HTML 還是有差異，跟 SASS 一樣需要編譯過網頁才讀得懂。所以編譯是個問題，那時候記得只會丟上別人寫好的頁面去編譯，然後自己手動貼上，後來想想這樣跟我一個一個改沒差別呀！傳送門

其實剛開始很不習慣

圖轉自 [https://hackernoon.com/webpack-vs-gulp-e623616b1dc](https://hackernoon.com/webpack-vs-gulp-e623616b1dc)

所以我說關於 Webpack 呢？

前言有點過常了，這邊將進入正題，在發現編譯問題後上網爬文得知了 Webpack 及 Gulp 這兩個打包工具，由於這邊不是要探討兩者差異問題所以不過多比較，會選擇 Webpack 的原因不外乎幾點原因。

  1. Gulp 比較偏向命令式的設定，所有編譯動作的邏輯都要自己動手寫，而且 Gulp 比較注重在任務方面，而 Webpack 注重在編譯及打包，另外規範明瞭，別人接手也能一目瞭然。

  2. 其他大大(傳送門)有說 Gulp 可能會停止更新。作者推特傳送門

其實我想要的比較符合 Webpack ；另外兩者其實並不會衝突，也沒有哪個特別好用，甚至你想要也可以把 Webpack 包進 Gulp 內，所以還是那句老話『沒有最好，只有最適合』。綜合以上兩點，我就直接選擇了 Webpack 了。

Webpack 的核心概念

仔細看官方網站的介紹其實再看看其他框架，都有一個共通點，就是都會有一個 JS 進入點，並且從這個進入點去告訴程式他要做什麼事情，當你東西一多，也不會散得到處都是。

entry → translate → output ( Webpack 基本流程

透過 Webpack 基本流程你可以引入多個檔案，然後透過 JS 進入點，導出一支或多支檔案。( 下方示意圖 與本次介紹無關 別害怕

Source from [Hero Of UnderGround — 8F](https://github.com/RexHung0302/JS-and-Fighter/blob/master/JS-and-Fighter-8F/src/main.js) 井字遊戲

Summary & 摘要

  1. 安裝

  2. 初始化

  3. 上工

  4. 結論

    防雷提示：關於我的 Note 系列還有任何內容都是作為筆記作用，因為還是菜雞一枚，如果有寫不好的地方非常歡迎指教，也歡迎指正，但是文章所寫所說的並未必一定百分百正確，所以請各位大神們多多包涵。

Webpack 老司機發車囉

[傳送門](https://nodejs.org/en/)

安裝 — 工欲善其事必先利其器

首先 Webpack 是在 Node.js 上運行的，所以必須安裝好 Node.js 及 npm，關於 Node.js 安裝部分傳送門在此。

我又跳出來啦

npm 全稱 Node Package Manager，即「node包管理器」，它是一個線上套件庫，可以下載各式各樣的 JavaScript 套件來使用。
關於使用 npm 安裝 Vue-cli 專案也可以看看我的另一個文章，**[Vue Notes] — Vue-Cli #1 初次見面**。

基本上安裝好 Node.js 後 npm 就會一併安裝了。

1
2
3
$ node -v
$ npm -v
// 輸入以上兩個指令查看有無安裝成功及版本號

安裝完成 (紅線請忽略

題外話 node_modules 圖書館

強力推薦這個網站 **[傳送門](https://cdnjs.com/)**

了解 node_modules 的話這部分可跳過

如果你在使用函式庫的時候還是需要使用 cdn 方式(上網複製一串網址)，其實你有更好的方法。

如果你有發現上網找套件時，找 cdn 那串網址前都會有另外的安裝方式 npm，其實裝了 npm 之後就可以使用啦。npm 安裝分為全域及當下的專案，把你想要的套件比如 Bootstrap、JQuery、AXIOS…等等安裝在全域，等下次需要建立新專案的時候，直接 npm install 就會跑出一個 node_modules 資料夾，裡面會有你安裝全域時安裝過的套件。

因為 node_modules 檔案有可能檔案會很多，所以通常大家把專案釋出或是上傳到其他空間或 Git 等等不會把 node_modules 一併上傳，那我們怎麼知道他裝了什麼套件呢？很簡單，進到專案直接 npm install package.json，你所安裝的套件也會寫在裡面。

一目瞭然 ( package.json 之一小部分

所以你想把專案搬家也很容易了呢。

初始化 — 萬事俱備 只欠東風

讓我們進入正題吧，直接到你想開專案的地方，開啟終端機，然後照著步驟做。

1
2
3
4
5
6
mkdir 你的專案名稱  // 建立資料夾
cd 你的專案名稱     // 移動到資料夾

// 初始化專案(二選一)
npm init
npm init -y

接下來會出現一些資訊要你填寫，這邊我們全都直接按 Enter 跳過即可，可以先不用特別了解。

**一路 enter 到北**

1
2
3
4
5
6
7
8
9
10
11
@簡單介紹
package name: (rexwebpack) // 專案名稱
version: (1.0.0)           // 版本
description:               // 專案描述
entry point: (index.js)    // 進入點 類似 Vue.js 的 app.js
test command:              // 專案的測試指令
git repository:            // 專案原始碼的版本控管位置
keywords:                  // 專案的關鍵字
author:                    // 作者
license: (ISC)             // 專案版權
@end簡單介紹

這時候你的資料夾會多一個 package.json的檔案，也是我們上面說的，以後要搬家或是別人要接手你的案子，拿到這個檔案，直接 install package.json 就好了。

接下來直接安裝我們的主角 Webpack 。

車子發動要一下呀

1
2
3
4
$ npm install -g webpack // 首先先全域安裝 Webpack
$ npm install webpack webpack-cli --save-dev // 在專案上安裝 Webpack
// p.s Webpack4.0  
// 開始必須安裝 webpack-cli 不然會無法執行

安裝成功

會多出 node_modules 及 package-lock.json

node_modeules：所有套件跟工具都會在這裡面。

package.json：關於整個專案所有的資訊，要搬移檔案也要靠這支檔案。

package-lock.json：package-lock.json是npm5版本新增的，是專門用來紀錄更細節的內容。

我的恐慌症要發作啦

OS：好像很麻煩 到這邊講了好多

老天爺不會虧待努力的人，看到這邊不要放棄，你就快成功了。

上工 — 伐伐伐伐木工

接下來讓我們新增兩個檔案 Webpack.config.js 及 index.js ，前者是主要的設定檔，後者為入口。

如果接下來你想照著官方教學走也可以 傳送門

目前結構

接下來打開 Webpack.config.js 輸入以下的程式碼。

1
2
3
4
5
6
7
8
9
10
11
12
13
// nodejs 的 api 主要用來做跟檔案位子或搬移有關的事情
const path = require('path');
// 主要的設定都會在這下面
module.exports = {
  // 入口
  entry: './index.js',
  // 出口
  output: {
    filename: 'index.bundle.js',
    path: path.resolve(__dirname, 'dist'), 
    // path.resolve 為絕對位置 dirname = '/'
  }
};

然後我們再 index.js上新增一些東西，讓我借用官方網站的範例。

1
2
3
4
5
6
7
function component() {
  var element = document.createElement('div');
  // Lodash (目前還沒安裝相關套件必須加上這個)
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  return element;
}
document.body.appendChild(component());

之後再到 package.json 的 scripts 下加上：

1
"start": "webpack --config webpack.config.js"

這邊其實跟 Vue.js 很像，在 scripts 後加上指令，在直接輸入 npm run XXXX 程式就會自己開始幫你編譯，然後輸出，這也是我們要用 Webpack 的出發點，他幫你編譯，然後把一堆零件，組成一個機器人。

成功畫面
這時候你會多出一個 dist 的資料夾，打開後發現多了一個檔案，點開發現會出現你看不太懂的程式碼，代表你編譯成功了。

關於紅色框框處

關於黃字

這部分基本是提醒您目前您還沒有設定是什麼模式，基本上有 開發模式 及 生產模式。要設定模式也很簡單，在你要使用的指令後方加上：

1
2
3
4
5
6
7
8
xxxxxxxxxxx --mode development // 開發模式
or
xxxxxxxxxxx --mode production // 生產模式

// 建議可以新增下面這幾個
"build": "webpack --mode=production",
"build:dev": "webpack --mode=development",
"start:dev": "webpack-dev-server --mode=development"

黃色的警告字消失了 ( 後來才又截圖的 請忽略內容…

編譯過的檔案

只有一個登機口？

如果我想編譯好幾個 JS 檔案呢？別急，這邊我們把 Webpack.config.js 的 entry 改寫一下，把 entry 改成 Object方式，下方的 output 會照著順序編譯出來，output 也可以使用下面的方式：

另外關於路徑也可以在上面多一個 context 設定路徑要從哪裡開始。

改造之後

新增一支 second.js 還有更改一下檔案放置位置。基本上編寫的程式碼檔案都會在 src 內，編寫出來的檔案都會放在 dist 的位置，讓我們新增一個 src 的資料夾，然後丟一個 index.html 在 dist 資料夾做實驗吧！

index.html 打上：

1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html>
  <head>
    <title>My First Webpack</title>
    // lodash 套件還沒安裝 先用 cdn 方式
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./main.bundle.js"></script>
  </body>
</html>

目前結構 — 編譯前

編譯成功後打開 index.html 應該可以看見 Hello webpack

目前結構 — 編譯後

不只伐木工 還有 礦礦礦礦工 建建建…

這時你可能會想要問，不是說好了還有 pug scss 什麼的嗎？

圖轉自 [https://codeburst.io/kickstart-your-next-project-with-this-starter-kit-d62e64b688da](https://codeburst.io/kickstart-your-next-project-with-this-starter-kit-d62e64b688da)

除了最一開始的 entry、output ，這就讓我們先來簡單了解一下 Webpack.config.js 的另外兩個基本架構吧。

更詳細可見 傳送門

module — 基本上裡面都會寫關於 loader 的東西，比如 sass-loader、pug-loader…等等

plugins — 裡面會寫一些套件相關的東西，比如CleanWebpackPlugin 或 HtmlWebpackPlugin…等等

關於各式各樣的 loader 傳送門

牛刀小試

說再多不如親身試一次懂的比較快，先在終端機輸入指令：

1
2
3
4
5
$ npm install --save-dev html-webpack-plugin
// 先安裝 html-webpack-plugin 可以自動產出一個 HTML 檔案

$ npm i -D node-sass sass-loader css-loader mini-css-extract-plugin
// 關於更多的 loader 及 plugins 的安裝方式都大同小異

之後查看 package.json 的 devDependencies 下方是否多了一個 “sass-loader”: “＾7.1.0”(後方數字為版本號 不一樣沒關係 確認為最新的即可)。

然後修改 Webpack.config.js 的設定：

entry 的部分新增要讀取的 SCSS ，然後透過 module 的 loader 去讀取 CSS 或是 SASS 編譯成 Webpack 看得懂的程式碼，然後再透過 plugins 去把他編譯成你需要的 CSS HTML … 等等的檔案。

這邊特別要注意，關於 module 內的 loader 讀取順序會從下往上。

之後新增 SCSS 的資料夾及檔案，之後執行編譯，就會發現多出了編譯過後的檔案，相同的，pug 也是這樣子做。

1
$ npm i -D pug pug-loader html-webpack-plugin

在 module 的 rules 裡面新增：

1
2
3
4
5
6
rules: [
  { 
    test: /\.pug$/,
    use: [“pug-loader”]
  },
]

然後再 plugins 裡新增：

1
2
3
4
5
6
7
8
9
// 有幾個 pug 檔就要用幾個
new HtmlWebpackPlugin({
  title: 'RexWebpack',
  hash: true,
  template: './pug/index.pug', 
  // 檔案位子 因為前面加過 context: path.resolve(__dirname, 'src') 所以不用從 ./src 開始
  filename: './index.html' 
  // 檔案輸出
}),

編譯成功

Conclusion & 結論

再接觸前端半年時一直都是東摸摸西摸摸，這邊學一點那邊學一點，雖然有人說過，學的越多，不懂的越多，但是你會發現你所摸所學的那些到最後竟然好像都有那麼點關聯。之前摸了一陣子的 Webpack 後有段時間沒有再去複習竟然有點生疏了，藉此就寫了篇文章來記錄。

之後或許會有更多更詳細的 Webpack 介紹？！

關於 Webpack 其實還有很多東西可以說，但是主要還是寫篇文章來告訴自己大部分的功能怎做，其實只要搞懂怎麼 npm install、npm 套件、設定 Webpack 就差不多可以做到大部分你想要做的事情了。

希望這篇文章之後再自己又生疏的時候或是剛好在找尋打包工具迷茫的你，這樣就值得了，不過每次在寫文章都會想，幾年後的我回來看應該會覺得在寫 3X 吧，希望沒有誤人子弟。

這次這篇文章也算是自己的計劃內，希望在這一年內可以至少把一個前端框架搞熟，並且在能更符合前端工程師的 Level (至少不要是只會切版啦…)，所以能摸能練習的東西都不會放過，縱使有錯，也希望能跟大家討論並且學習成長。寫完這篇文章，下一次就會開始嘗試在 Vue.js 內使用 Webpack ，又是一大挑戰呀！

是說官方網站其實介紹的也挺詳細的 強烈建議可以去看看 傳送門
最後的最後附上弱弱的 Webpack Git 傳送門 有興趣可以抓下來玩
P.S 記得之前在爬文練習找好久都找不到有裝 Pug-loader 的 Webpack
不然就是找到不能跑 555…

2020/04/12 後更： 上傳了新版的 Webpack 程式碼，內容包含 Vue 打包，請至此處觀看。

參考網站