FE301

Webpack 5 入門

從模組化帶你認識 Webpack,工程師不能不認識的打包工具!

當你專案裡的程式碼越來越多,開發和管理維護是否日益困難?Webpack 可以將各式檔案資源模組化並打包,讓瀏覽器好編譯,更不用手動逐一檔案操作引入,只要使用 Webpack 就能有效提升開發效率,算是現代前端不得不了解的工具,可以有效提升開發效率!

現在報名只要 NT$1,000
  • 終身存取權
  • 可行動裝置使用
  • 課程時長:1.8 小時
  • 結業證書

講師介紹

使用者大頭貼

奶綠茶

資深前端開發者與程式開發講師,授課資歷十年以上。
擅長 HTML、CSS、JavaScript、jQuery、Vue、React 開發應用與 Webpack 前端打包工具等,專修各種前端跨平台的疑難雜症。
另一個身份為花鬍子樂團吉他手,育有二貓,喜愛小酌。

課程特色

專修各種前端跨平台的 Webpack 打包工具,除了可以將各種檔案資源如.pug / .sass / .js / .png / .jpg 等一次打包,讓你好進行模組化開發,更減少翻找檔案的時間,讓工程師可以將更多心力放在開發上,讓你輕鬆解決管理和維護的困難。

課程內容豐富多元,你將認識:
✓ Webpack 簡介和打包原理
✓ 環境安裝
✓ ES6 Module
✓ Webpack 套件
✓ 整合 React.js
✓ 業界常用範例演練
✓ 可搭配的外掛和社群資源

課程章節

檔案下載

範例檔案下載

課程內容

01 : 50 : 28

01 - Webpack 簡介

01 : 19

02 - 環境安裝

02 : 43

03 - Hello Webpack!

14 : 25

04 - ES6 Module

11 : 58

05 - Webpack 套件 cross-env

08 : 56

06 - Babel preset-env

07 : 58

07 - Style Loader 與 Url Loader

09 : 24

08 - Webpack-dev-server

09 : 36

09 - Webpack-dev-server 與 Pug

05 : 15

10 - Webpack 套件 mini-css-extract-plugin

04 : 30

11 - contenthash

07 : 40

12 - DefinePlugin

04 : 36

13 - Webpack 最佳化

05 : 52

14 - Multiple Entry

04 : 38

15 - ESLint

05 : 49

16 - 整合 React.js

03 : 58

17 - 小結

01 : 51

FE301

Webpack 5 入門

現在報名只要 NT$1,000
  • 終身存取權
  • 可行動裝置使用
  • 課程時長:1.8 小時
  • 結業證書

其他課程推薦