2021/10/08

Webpack 5 初探筆記

 


在寫完【還在 React 從入門到放棄?告訴你選擇比努力還重要的事】這篇文章之後,原本要繼續我的 React 裸奔之旅,但看到【【前端速成】Webpack5 快速入門|Tiktok工程師帶你入門前端|布魯斯前端】的直播內容,發現 Webpack 和 Delphi 的專案檔實在太像了,手癢忍不住動手把自己的 jQuery 網站利用 Webpack 重新打包順道重構,過程很有趣,而且整理後的專案內容就像是看網站地圖一樣,看了心情大好。

趁還有記憶時把 Webpack 的參數檔和 NPM package 參數檔透過這偏文章寫下來。

Package.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// package.json
{
  "name": "eden_first_project",
  "version": "1.0.0",
  "description": "",
  "main": "maindesk.js",
  "scripts": {
    "build": "SET NODE_ENV=production && webpack",
    "design_build": "SET NODE_ENV=development && webpack && copyfile_with_debug.bat",
    "dev": "webpack serve"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0",
    "html-webpack-plugin": "^5.3.2",
    "webpack": "^5.56.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.3.1"
  }
}

程式說明

devDependencies:內容是 npm 安裝的外掛工具及版本,功能有:

  • webpack 本體
  • webpack 外掛 -- 清理編譯後檔案
  • webpack 外掛 -- 頁面樣板設定
  • babel -- 轉譯 ES6 程式碼為其它瀏覽器可讀的程式碼內容

 

scripts:在命令提示字元視窗下執行 webpack 的指令,語法為【npm run [scripts]】,SET 是設定 Windows 的環境變數,可以依照【設計】或【產品】語法來改變 webpack 封裝設定。[&&] 是 Windows 執行多指令的節點,某些靜態檔案還可以透過批次檔進行複製。

npm 在對專案處理時都會以 package.json 作為進入點,比較要記的就是這兩個屬性。


webpack.config.js - part 1

程式說明

package.json 的 SET NODE_ENV,它會在 webpack.config.js 的 process.env 被 NPM 寫入環境變數。

先快速導覽大分類,之後再一個個進去看。

module.export 這是 webpack 專案檔的核心。

mode 設定【設計】或【產品】模式;entry 要被 webpack 編譯的 js 檔案。

output 指定原檔案編譯後存放的路徑和命名規則。

devServer 執行 webpack server 時 Web 伺服器的參數。

module webpack 在讀取 js 檔以外的檔案時,所需要的 loader

devtool 編譯時做對照檔 (map),使瀏覽器能夠讀出編譯和原始程式碼的對照檔

plugin webpack 外掛設定區。 

webpack.config.js - part 2


程式說明

entry 裡,要寫上所有需要編譯的 js 檔案,格式為【暱稱:路徑】,暱稱在之後的【plugins 》 HtmlWebpackPlugin】會用到。

output 裡,path 說明 entry 裡的檔案在編譯後所放置的路徑,以 package.json 所在路徑為 root,可以自由指定,filename 為了確保客戶端每次都會重新讀取,可以把檔案加入【hash】參數,編譯會將 hash 碼帶入檔名,如:maindesk.f22745d9520340e7af08.bundle.js。


webpack.config.js - part3


程式說明

plugin 裡面主要放 webpack 外掛模組,有:

CleanWebpackPlugin 是每次編譯當下都會將目的目錄內的檔案全數清空。

webpack.DefinePlugin 是定義編譯環境的全域變數,此例可以在網路中的任何 JS 寫上類似以下的內容:

可以在編譯時決定要執行哪部份的程式內容,好用!

HtmlWebpackPlugin 決定讀取的樣板和 HTML 檔案路徑,chunks 是決定要寫入 entry 的哪些檔案,以暱稱設定,設為空字串時則不匯入任何 js 檔;也可以使用 excludeChunks 決定不加入的 js 清單。


結論時間

學習 Webpack 的過程中不斷帶入以前寫 Delphi 專案檔的時光,所以還蠻能理解 Webpack 的各項設定的內容,都已經用編譯了,那就順便把 Delphi 的設定概念套入,Webpack 還有很多細節的設定,只要大方向有了,再往細節裡找的難度就會下降很多!

今日成就:把 jQuery 網站套入 Webpack 專案編譯成功!


和你分享 😉

沒有留言:

張貼留言