image alt圖片來源

Webpack 是一個模組打包工具(module bundler)，可以將多個 JavaScript 檔案，整合成一個檔案，讓模組化開發變得更加容易。

安裝 node.js

Webpack 是基於 node.js 來運行的，所以需要先安裝 node.js 環境，可以參考下面這篇文章。

建立專案環境

使用命令列建立一個專案目錄，然後進入到目錄底下

# 建立一個專案目錄
mkdir demo

# 切換到專案目錄底下
cd demo

使用 npm 初始化專案的資訊，產生 package.json 檔案來記錄這些資訊。

npm init -y

npm init 會要求輸入一些專案資訊，加上參數 -y 可以忽略這些過程，使用預設的資訊填寫。

使用 npm 安裝 webpack 與 webpack-cli 套件到專案中，

npm install webpack webpack-cli --save-dev

參數 --save-dev 會將套件的資訊記錄在 package.json 檔案中的 devDependencies 裡面，代表開發環境才會用到的套件。可以參考這篇章 弄懂 npm install 的 –save 與 –save-dev

使用 npx 執行 webpack 的指令來檢查版本，出現版本號就代表安裝成功

npx webpack -v

安裝後專案的目錄狀況

package.json 的內容

打包流程

使用 Webpack 打包前需要指定一個 JavaScript 的檔案作為進入點，它會從這檔案開始解析，然後依序引入其他資源進行打包，最後輸出完成的檔案到指定目錄。

webpack.config.js 是 webpack 預設的設定檔，當要執行打包工作時，會先去讀取設定檔。如果沒有設定檔，預設會從 src 資料夾中找到 index.js 檔案去打包，然後輸出 main.js 檔案到 dist 資料夾下面。

預設 webpack 只能打包 js 與 json 文件，如果要打包其他的資源，需要安裝其他的 loader 才能夠進行處理。

第一次打包

第一次我們嘗試使用預設的方式來打包一個簡單的 JavaScript 檔案，看看 Webpack 會如何進行。

首先在專案目錄下面新增一個 src 資料夾，在裡面放置一個 index.js 檔案。

# 新增 src 目錄，並切換到該目錄下面
mkdir src && cd src

# 新增 index.js 檔案
touch index.js

使用 VS Code 在 index.js 寫入一段簡單的程式碼

console.log('Hello Webpack!!')

在命令列輸入指令呼叫 Webpack 進行打包

# 執行 webpack 進行打包
npx webpack

打包後的檔案 main.js 會被放置在專案的 dist 目錄裡面，從 VS Code 裡面可以看到它

新增一個 index.html 來引用這個打包過的檔案，測試是否能在 Chrome 瀏覽器上正常工作，達到我們預期的功能。

從 Chrome 瀏覽器的 console 頁面，可以看到有正常顯示 Webpack Hello !!

檢查 main.js 檔案的內容，你會發現多了很多的程式碼，這是因為 Webpack 在打包的過程中會幫你優化程式碼，同時增加 JavaScript 模組化開發需要的相關功能，這也是為何需要使用 Webpack 打包的主要原因。

客製你的打包流程

在專案目錄下新增 webpack.config.js 檔案

複製下方的程式碼，我們維持進入點的設定方式，但修改輸出檔案的位置與檔名。

//  Node.js 內建用來處理路徑的模組
const path = require('path');
module.exports = {

  // Webpack 的進入點
  entry: './src/index.js',
  
  // Webpack 輸出點
  output: {
  
    // 輸出的檔案名稱
    filename: 'index.bundle.js',
    
    // 輸出的檔案位置

    path: path.resolve(__dirname, './'),
  }
};

呼叫 Webpack 打包後，就會在專案的根目錄下產生 index.bundle.js 檔案，成功修改打包檔的名稱與位置。

npx webpack

自動打包

在開發時經常需要測試程式碼是否正常運作，如果每次都需要自己手動重新編譯才能測試的話，工作就會變得非常繁瑣。

可以在指令的後面增加 --watch 參數，這樣在完成編譯後 Webpack 就不會立刻結束，會持續監聽檔案的變化，只要檔案有變動，就會自動打包。

npx webpack --watch

Webpack 的編譯方式有兩種，預設是使用生產版本的方式作編譯，因為要壓縮檔案與優化程式碼，所以比起開發版本的編譯方式，會佔用較多電腦資源，也更加耗時，所以在測試程式碼的時候，建議使用開發版本的方式編譯，會更加適合。

  • production: 生產版本，需要將檔案壓縮與優化
  • development: 開發版本，只編譯

在指令後面再加上 --mode development 就會以開發版本的方式編譯。

npx webpack --watch --mode development

參考資料