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 專案編譯成功！


和你分享 😉

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)