分類: Webpack

EP-12-關於-Webpack-學習這件小事之 CSS 壓縮

這一篇文章應該要在前面的章節撰寫的，後來我發現我忘記 CSS 壓縮的套件要加入，所以這邊紀錄一下。

EP-11-關於-Webpack-學習這件小事之 prod 與 dev？

一般來講 Webpack 都會有兩種開發模式，一種是 prod 與 dev，這邊就來記錄一下該如何設置 prod 與 dev 吧!

EP 10 - 關於 Webpack 學習這件小事之測試單元

撰寫這篇文章的原因是因為自己的友站有撰寫了關於測試單元 (Unit Test) 的部分，那我也因為好奇所以就依照文章來試著玩看看吧~

EP 9 - 關於 Webpack 學習這件小事之打包圖片

接下來將會講解該如何打包圖片，但是打包圖片這邊有許多的雷點，在自己的友站就有提到「SCSS 可能會編譯失敗」，但是由於自己是採用 PUG Template，做法又有點不太一樣，所以這邊就來記錄一下吧

EP 8 - 關於 Webpack 學習這件小事之清除文件

EP 7 - 關於 Webpack 學習這件小事之使用 HTML Template （PUG 篇）

接下來將要來記錄我常用來切版的 HTML Template 語言，也就是 PUG，這邊並不會教學該如何撰寫 PUG 而是記錄該如何安裝 PUG 及編譯而已。

EP 6 - 關於 Webpack 學習這件小事之 JavaScript 模組化開發

這章節要來講一下模組化開發的部分，很多時候當我們 JavaScript 越寫越多的時候就會希望特地區塊的功能可以切出來，那為什麼會留到 EP 6 才做紀錄呢？因為模組化開發也會建議使用 Bebal，所以這邊就來記錄一下該如何撰寫吧

EP 5 - 關於 Webpack 學習這件小事之bebal

由於我們平常撰寫 JavaScript 的時候，都必須顧慮每一個瀏覽器的支援性問題，所以這邊要來記錄替 Webpack 加入 Bebal 這個編譯神器工具，它可以幫助我們將我們所撰寫的 JavaScript 編譯成所有瀏覽器可以支援的 JavaScript

EP 4 - 關於 Webpack 學習這件小事之伺服器

前面基本上常見的東西也算是也記錄了，這邊先來記錄一下該如何在 Webpack 中開啟模擬伺服器，否則每次編譯之後還要將 dist 拖曳進新的 VS Code 中開啟伺服器這樣實在太麻煩，所以這邊就來做一下紀錄哩~

EP 3 - 關於 Webpack 學習這件小事之SCSS撰寫及安裝

前面已經學到該如何安裝基礎插件了，但是平常我們在撰寫時不只有這樣子，舉例我來講我是習慣撰寫 SCSS 的，所以這篇就來記錄一下 SCSS 安裝及撰寫。