線上課程
/
網站開發
Webpack 5 入門
從模組化帶你認識 Webpack，工程師不能不認識的打包工具！
當你專案裡的程式碼越來越多，開發和管理維護是否日益困難？Webpack 可以將各式檔案資源模組化並打包，讓瀏覽器好編譯，更不用手動逐一檔案操作引入，只要使用 Webpack 就能有效提升開發效率，算是現代前端不得不了解的工具，可以有效提升開發效率！
1.8 小時
2 章節
18 單元
講師：
廖珀均 aka 奶綠茶
最後更新：2026 年 03 月
你將學到什麼
專修各種前端跨平台的 Webpack 打包工具，除了可以將各種檔案資源如.pug / .sass / .js / .png / .jpg 等一次打包，讓你好進行模組化開發，更減少翻找檔案的時間，讓工程師可以將更多心力放在開發上，讓你輕鬆解決管理和維護的困難。
課程內容豐富多元，你將認識：
✓ Webpack 簡介和打包原理
✓ 環境安裝
✓ ES6 Module
✓ Webpack 套件
✓ 整合 React.js
✓ 業界常用範例演練
✓ 可搭配的外掛和社群資源
課程大綱
2 章節 · 18 單元 · 1.8 小時
範例檔案下載
01 - Webpack 簡介
1 分鐘
02 - 環境安裝
2 分鐘
03 - Hello Webpack!
14 分鐘
04 - ES6 Module
11 分鐘
05 - Webpack 套件 cross-env
8 分鐘
06 - Babel preset-env
7 分鐘
07 - Style Loader 與 Url Loader
9 分鐘
08 - Webpack-dev-server
9 分鐘
09 - Webpack-dev-server 與 Pug
5 分鐘
10 - Webpack 套件 mini-css-extract-plugin
4 分鐘
11 - contenthash
7 分鐘
12 - DefinePlugin
4 分鐘
13 - Webpack 最佳化
5 分鐘
14 - Multiple Entry
4 分鐘
15 - ESLint
5 分鐘
16 - 整合 React.js
3 分鐘
17 - 小結
1 分鐘
講師介紹
資深前端開發者與程式開發講師，授課資歷十年以上。
擅長 HTML、CSS、JavaScript、jQuery、Vue、React 開發應用與 Webpack 前端打包工具等，專修各種前端跨平台的疑難雜症。
另一個身份為花鬍子樂團吉他手，育有二貓，喜愛小酌。
廖珀均 的其他課程
推薦課程
你可能也會喜歡的學習內容
.jpg)
%20(1).png)
NT$1,000