iT邦幫忙

鐵人檔案

2017 iT 邦幫忙鐵人賽
回列表
Modern Web

使用 webpack 模組化你的程式碼,讓人生更美好。 系列

為什麼要使用 webpack 呢?這幾年,大家常常拿一些工具來做比較,諸如 Make、Grunt、Gulp,這類工具被歸為 Task Runers;而 webpack 歸為 Module Bundler,那這兩者又有什麼差別呢?我們又為什麼要多使用 webpack 呢?接下來的30天奮鬥,即將揭曉。

鐵人鍊成 | 共 30 篇文章 | 90 人訂閱 訂閱系列文 RSS系列文
DAY 1

<01 - 起手式> 安裝 webpack

stop... 在安裝之前,總該先瞭解一下為什麼要使用 webpack 呢?跟其它 Gulp、Grunt 有什麼差異呢? 為什麼要使用 webpack 呢? w...

2016-12-01 ‧ 由 Carlos Chang 分享
DAY 2

<02 - 立竿見影> 使用 webpack 快速模組化,初探 config

如果一個好的工具,若不能在短時間瞭解整個運作原理的話,那還不如捨棄它,對吧!我們的生命遠遠比這些工具來得重要,寫程式的目的是要來人生更美好,所以今天的主題,就是...

2016-12-02 ‧ 由 Carlos Chang 分享
DAY 3

<03 - 啟動原始碼> 使用 webpack-dev-server 及 webpack watch mode 來啟動吧!!

前兩天,我們分別介紹了 &lt;起手式&gt; 安裝 webpack &lt;立竿見影&gt; 使用 webpack 快速模組化,初探 config...

2016-12-03 ‧ 由 Carlos Chang 分享
DAY 4

<04 - 心法1 - 根源> Entry

在學習 webpack 的領域中,有四個核心心法一定要先熟悉,分別是 Entry、Output、Loaders、Plugins,而今天,主要會介紹 Entry...

2016-12-04 ‧ 由 Carlos Chang 分享
DAY 5

<05 - 心法2 - 輸出> Output

昨天,介紹了 &lt;04 - 心法1 - 根源&gt; Entry,非常重要,因為在設定檔(webpack.config.js),我們指定了 entry,那相...

2016-12-05 ‧ 由 Carlos Chang 分享
DAY 6

<06 - 心法3 - 強化> Loaders - 示範 css-loader 與 style-loader

今天要來講 webpack 一個很重要且很常用的心法:Loaders,該怎麼說好呢? 我想應該說其實 webpack 本身其實看不懂除了 js 以外的東西(例如...

2016-12-06 ‧ 由 Carlos Chang 分享
DAY 7

<07 - 心法4 - 無所不能> Plugins - 示範內建的 webpack.optimize.UglifyJsPlugin

為什麼說 plugins 無所不能呢?因為你可以自行開發 Plugins,雖然 Loaders 也可以自行開發,但 Plugins 就是為了來擴充 Loader...

2016-12-07 ‧ 由 Carlos Chang 分享
DAY 8

<08 - 溫故知新> 階段複習過去七天所瞭解的 webpack

今天是第8天,也代表著過去7天已撰寫了7篇文章,不管有沒有人看,只要有一個人看,那就值得啦。做網站開發這件事,深深感受到網站技術的推陳出新,今天流行的,明天可能...

2016-12-08 ‧ 由 Carlos Chang 分享
DAY 9

<09 - Loaders 再進化系列 01> sass-loader - 開始撰寫 SCSS 語法吧!

今天要來延伸一下在 &lt;06 - 心法3 - 強化&gt; Loaders - 示範 css-loader 與 style-loader 這篇文章所提到的,...

2016-12-09 ‧ 由 Carlos Chang 分享
DAY 10

<10 - Loaders 再進化系列 02> file-loader - 將圖片也載入模組吧!

目前進行到這邊,整個模組化的過程式,我們已經載入了 js 以及 css(以及 SCSS 語法),那圖片的部份呢?或者是其它檔案類型呢? 這時就要派出 file-...

2016-12-10 ‧ 由 Carlos Chang 分享