技術 Day 03：React Ecosystem

本篇目的 這篇雖然不免俗的介紹到一些眾所皆知的工具，但嘗試用一些比較不死板的方式，寫出基本概念、筆者的看法與一些值得參考的資源，相信可以帶給大家一些啟發。 Ba...

技術 <18 - Plugins 小幫手 01> 自動產生 html 檔，並包含 bundle 後的檔案路徑 - html-webpack-plugin

在執行 webpack 進行 bundle 的過程中，若有使用 hash 碼的話，那麼在改變檔案程式的時候再進行 bundle 時，這些 hash 碼都會變得不...

技術 <17 - 再續心法 3> Code Splitting - Libraries

今天想要來談談關於使用第三方程式碼的時候，該如何將它們抽離出來呢？其實在 &lt;04 - 心法1 - 根源&gt; Entry 已經有提到了一個方式，就是直接...

技術 <16 - 再續心法 2> Code Splitting - CSS

程式碼的分離，今天要再來談談 css 的部份，要先來回顧一下 ./app/index.js 檔案，有一行是這個： … require(&quot;./file....

技術 <14 - 溫故知新 2> 附上目前的程式碼，即將進入 Code Splitting 心法

在使用 webpack 的過程中，有個很重要的觀念，叫做 Code Splitting，其實在過去幾天的介紹，已經有使用到了 Code Splitting 的觀...

技術 <13 - Loaders 再進化系列 05> babel-loader - 就是狂

今天原本想要講 i18n-loader，但我突然發現此 loader 在官方 github 上，已經標示 [DEPRECATED]，也就是不再建議使用了。所以之...

技術 <12 - Loaders 再進化系列 04> json-loader - 讓模組載入 json 格式資料吧！

所謂的模組就是就各種資源(Resources)綑綁在一起，方便使用。先前已經介紹了將 js、image、css、scss、html變成一個模組，輸出成 ./di...

技術 <11 - Loaders 再進化系列 03> html-loader - 將 html 從 js 抽離出來吧！

今天要來介紹另一個利器：html-loader，讓我們來回顧一下 ./app/index.js 檔案吧，其中有一段是： function appendImg()...

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

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

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

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

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

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

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

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

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

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

技術 <05 - 心法2 - 輸出> Output

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

技術 <04 - 心法1 - 根源> Entry

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

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

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

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

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

技術 <01 - 起手式> 安裝 webpack

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