✔︎編譯語法與設定簡潔易懂、好上手  ✔︎穩定有效的控制開發套件的版本 

✔︎自動處理開發上面所有繁瑣的項目  ✔︎業界使用率最高,適合團隊多人合作 

✔︎大小型專案中,都能輕鬆導入使用  ✔︎擁有豐富的模組化元件,不用重新造輪子 

✔︎能將編譯內容打包成一包完成檔案  ✔︎編譯預處理成瀏覽器看得懂的內容

使用 Webpack 能大幅提升工作效率?一起聽聽Mike老師怎麼說~

▶︎完整課程大綱:http://bit.ly/2NHKAxl(課程預計至少180分鐘、30個章節

這門課程是專為想精進前端技術的你而設計!

完全初心者(沒學過Webpack,但想深入瞭解的人)◇瞭解現代 Web 前端的開發技術,跟上業界需求
◇學習更適合自己開發專案方式,讓技術更上層樓
◇學會前端自動化開發方式,提升職場競爭力

有經驗者(使用過Webpack,但卡關的人)◇瞭解 Webpack 工作原理,靈活運用此技術◇學會前端自動化開發方式,大幅提升開發效率◇不用在花錢買許多第三方編譯前處理(ES6、Sass等)的軟體

Q1.上課前,需要準備什麼工具與先備知識呢?

1.需要有專案的實務經驗 (Jquery / Vue-cli / Create-React-App......等)

2.一台有網路的電腦&想精進自己的決心

Q2.募資預購時間到什麼時候? 

這堂課在 10/17 (三) ~ 11/19 (一) 開放課程募資預購,募資期間購課優惠 $1,500 元。 (11/20 起將恢復原價 $2,000 元)

Q3.這門課什麼時候開始上課?

若募資成功後,我們預計將於 2019/01/29 上架課程喔!  

Q4.這門課可以看多久? 

購課後享不限次數、永久觀看,可以一直看一直學!  

Q5.可以問老師問題嗎?

當然!歡迎到「購課問答」詢問 ; 當學習遇到問題時,也歡迎到「課程討論區」與老師同學一同互動。

Q6.我要如何購買課程呢?

非常的簡單!在你的右手邊有「立即購買」的字樣,點進去就對啦!

Q7.目前有哪些付款方式呢?

目前 YOTTA 提供三種付款方式: 

 a/ 信用卡付款 

 b/ 超商付款(7-11、全家、萊爾富、OK 即可繳費) 

 c/ ATM 轉帳

Q8.為什麼我已經付款了,訂單狀態仍顯示未付款?

若您選擇「超商」或「ATM」方式付款,金流處理時間需要 1~3 個工作天, 等金流完成入帳後,您的「訂單狀態」將會轉為顯示「已付款」,需稍待幾天喔!

Q9.請問什麼時候會收到發票?

當本堂課程募資達標後 10 天,電子發票將會透過 E-mail 方式寄送電子發票給您。

單元

41

課程總長

309分鐘

課堂測驗

尚無測驗

  • Ch1 Webpack 的基本介紹
  • 1 課程開始 試看 01:41
  • 2 什麼是Webpack?為什麼要用Webpack? 試看 08:54
  • Ch2 開發前的準備
  • 3 開發環境建置:VSCode + Nodejs + npm 試看 18:37
  • Ch3 Webpack 基本設定
  • 4 先來個HelloWord吧 - 1 試看 04:29
  • 5 先來個HelloWord吧 - 2 試看 04:43
  • 6 先來個HelloWord吧 - 3 試看 09:46
  • 7 Path 檔案路徑設定 試看 10:37
  • 8 npm scripts 的使用 試看 05:52
  • 9 環境變數 NODE_ENV 的概念與使用 試看 08:04
  • 10 永不停止的 Watch 試看 04:39
  • 11 Filename檔案名稱修正 試看 04:34
  • Ch4 Webpack loader & Plugin
  • 12 Webpack + CssLoader 讀取 CSS 試看 15:54
  • 13 獨立拆分css檔 - 1 試看 11:01
  • 14 獨立拆分css檔 - 2 試看 05:15
  • 15 PostCSS與autoprefixer CSS瀏覽器相容性 試看 08:06
  • 16 檔案搬移 FileLoader 試看 08:28
  • 17 編譯 Sass 與 SassLoader - 1 試看 05:07
  • 18 編譯 Sass 與 SassLoader - 2 試看 01:49
  • 19 本地開發測試Server啟動 Webpack-Dev-server 試看 10:30
  • 20 編譯 Js ES6/ES7/ES8 就靠Babel了! - 1 試看 06:28
  • 21 編譯 Js ES6/ES7/ES8 就靠Babel了! - 2 試看 02:37
  • 22 模組化 js 之 Import & Require 差別 - 1 試看 11:24
  • 23 模組化 js 之 Import & Require 差別 - 2 試看 01:11
  • 24 babel Proposal-class-properties - 1 試看 09:43
  • 25 babel Proposal-class-properties - 2 試看 01:02
  • 26 babel-polyfill - 1 試看 04:42
  • 27 babel-polyfill - 2 試看 08:01
  • 28 Resolve 設定跟副檔名說再見之踩雷須知 - 1 試看 10:20
  • 29 Resolve 設定跟副檔名說再見之踩雷須知 - 2 試看 02:36
  • 30 UrlLoader 轉 base64優化網頁圖片 試看 11:33
  • 31 Images-webpack-loader 優化網頁圖片 試看 06:01
  • 32 CopyWebpackPlugin 原封不動的移動 試看 07:43
  • Ch5 Webpack 開發細節處理
  • 33 全域共用的 ProvidePlugin 試看 09:43
  • 34 Html-Webpack-Plugin & entry自動注入 試看 15:28
  • 35 Pug 轉換 HTML 使用 試看 05:56
  • 36 Vendor.js 與 Entry.js 試看 06:18
  • 37 檔案打包與排除 試看 05:40
  • 38 local 連線 dev-server 的 host設定 試看 04:05
  • Ch6 Webpack 建構框架
  • 39 建構自己的 React 開發環境 試看 10:13
  • 40 建構自己的 Vue 開發環境 試看 11:50
  • Ch7 課程總結
  • 41 最後的最後 試看 08:23

開始分享你的學習成果吧!

這裡是專屬於課堂學員及老師可以互動的作業區,學員們可以透過實際操作來複習課程中所學習到的內容,作業完成後只要簡單上傳到平台裡,就能得到更多老師的指點唷!同時,在這裡也可以觀摩其他學員的成果,一起來互相切磋吧!

<%if list.length == 0 %>

尚無作業

老師還沒有出作業唷!

<%else%> <%props list%>

作業<%>~numToZH(~toInt(key) + 1)%>

<%if prop.type == 'image' %> 圖片檔 <%else prop.type == 'pdf' %> picture_as_pdfPDF <%else prop.type == 'youtube' %> Youtube 影片連結 <%else prop.type == 'ppt' %> PowerPoint <%else prop.type == 'sound' %> 錄音檔 <%/if %>

<%:prop.title%>

<%/props%> <%/if%>

作業觀摩

目前還沒有任何學員上傳作業喔!來當第一個吧~

<%props data%>

<%if prop.type == 'image' %> <%else prop.type == 'pdf' %> picture_as_pdf <%else prop.type == 'youtube' %> <%else prop.type == 'ppt' %> <%else prop.type == 'sound' %> <%/if %> 作業<%>~numToZH(~toInt(key) + 1)%> <%:prop.title%>

<%:~loadTmpl('homework-card', prop.rows)%>
<%/props%>
<%props data%>
<%if prop.type == 'image'%>
<%:~isGif(prop.cover)%>
<%else prop.type == 'pdf' %>
picture_as_pdf
<%else prop.type == 'youtube' %>
<%else prop.type == 'ppt' %>
<%else prop.type == 'sound' %>
<%/if%>
<%if prop.visible == 1 %> <%/if %>

<%:~formatDate(prop.create, 'YYYY-MM-DD')%>

<%:prop.title%>

<%:prop.user%>

<%if prop.isAuthor == true %> 刪除 編輯 <%/if %>

<%:prop.comment_count%>

<%/props%>

錄音 <%:~numToZH(sort + 1)%>

錄音 <%:~numToZH(sort + 1)%>

來關注最新的課程資訊吧!

這裡是專屬課程的公告區,老師將在此發佈與課程相關的重要資訊,您可以在此看到所有與課程有關的最新公告。

尚無公告

老師還沒有發佈公告唷!

<%props data%>

<%:~formatDate(prop.publishDate, 'YYYY/MM/DD')%>

<%:prop.title%>

<%if ~root.isStudent === false && ~root.isTeacher === false && prop.permission === 'private' %>

本篇公告僅限購課學員閱讀,若您已購買本堂課程,請先以購課帳號登入!

<%else%> <%:prop.content%> <%/if%>
<%/props%>

回頂端