<%props data%>
  • <%:prop.name%>

    <%if prop.total%><%:prop.total%><%/if%>
  • <%/props%>

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

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

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

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

    使用 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%>

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

    回頂端