iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1 Like 0 留言 2805 瀏覽

鐵人賽 Modern Web DAY 30

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

技術 <30 - 最終章> Future!

今天是最後一天啦，第一次參加IT邦幫忙的鐵人賽，連續寫30天，每天一篇，共30篇的文章，坦白說，還真的挺不容易，也看了很多高手的文章，也覺得受益匪淺，也覺得網站...

Carlos Chang ‧ 2016-12-30

1 Like 0 留言 3704 瀏覽

鐵人賽 Modern Web DAY 29

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

技術 <29 - 番外篇 03> webpack 與 gulp 聯手 - Stats 調校輸出訊息

今天是番外篇的最後一篇文章，其實到目前為止，也已經做到如何使用 gulp 來執行 webpack 了，只是還有一個小小的問題，我想做改良，也就是輸出的訊息。在...

Carlos Chang ‧ 2016-12-29

0 Like 0 留言 2923 瀏覽

鐵人賽 Modern Web DAY 28

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

技術 <28 - 番外篇 02> webpack 與 gulp 聯手 - 整合 webpack-dev-server

在昨天的 <27 - 番外篇 01> webpack 與 gulp 聯手 - 安裝 gulp 文章當中，已經瞭解到如何整合 webpack 與 gu...

Carlos Chang ‧ 2016-12-28

0 Like 0 留言 5633 瀏覽

鐵人賽 Modern Web DAY 27

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

技術 <27 - 番外篇 01> webpack 與 gulp 聯手 - 安裝 gulp

寫到今天，其實應該都已經知道 webpack 是做什麼用的了，名副其實的 module bundler，就是將你的各種 assets 打包在一起，形成模組。...

Carlos Chang ‧ 2016-12-27

0 Like 0 留言 4670 瀏覽

鐵人賽 Modern Web DAY 26

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

技術 <26 - 心法 6 - 再探設定檔> webpack 設定檔中的 externals

今天要來談談在 webpack.config.js 檔中的 externals 參數的基本用法，在我的專案資料夾中，我並沒有安裝 jQuery 這個函式庫。然...

Carlos Chang ‧ 2016-12-26

0 Like 0 留言 1549 瀏覽

鐵人賽 Modern Web DAY 25

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

技術 <25 - 溫故知新 02> 階段複習過去所瞭解的 webpack - 可下載目前的原始碼

今天這篇已經是第 25 篇了，感覺剩下最後一哩路。想來打點心得，其實我跟各位看官們一樣，我也是 Webpack 的初學者，藉由這次的比賽，也讓自己多學一樣技術...

Carlos Chang ‧ 2016-12-25

0 Like 1 留言 5760 瀏覽

鐵人賽 Modern Web DAY 24

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

技術 <24 - 心法 5 - 再探設定檔> webpack 設定檔中的 Public Path

今天想要回過頭來講一下基本觀念 Public Path，這是跟設定檔(webpack.config.js)有關的東西，讓你可以針對你的 assets 指定 ba...

Carlos Chang ‧ 2016-12-24

0 Like 0 留言 2138 瀏覽

鐵人賽 Modern Web DAY 23

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

技術 <23 - React 上陣 02> Webpack - Babel - React 聯手 - 撰寫多個元件並匯入至某個JS

繼上一篇 <22 - React 上陣> Webpack - Babel - React 聯手，已經做好基本的安裝與設定，接下來要更進一步寫多個元件...

Carlos Chang ‧ 2016-12-23

0 Like 0 留言 2155 瀏覽

鐵人賽 Modern Web DAY 22

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

技術 <22 - React 上陣 01> Webpack - Babel - React 聯手

火紅的 React，建立元件銳不可擋，今天來寫一個 Hello World 的 React 元件，然後示範該如何透過 webpack 以及 babel 來 bu...

Carlos Chang ‧ 2016-12-22

0 Like 0 留言 6334 瀏覽

鐵人賽 Modern Web DAY 21

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

技術 <21 - Plugins 小幫手 04> 複製資料夾 - copy-webpack-plugin

今天想要來介紹 copy-webpack-plugin 的使用，因為有一種情境是有時我們不需要進入模組化的 bundle，只需要將某個檔案或某個資料夾裡，整個...

Carlos Chang ‧ 2016-12-21

0 Like 0 留言 4949 瀏覽

鐵人賽 Modern Web DAY 20

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

技術 <20 - Plugins 小幫手 03> 清除 bundle 後的資料夾 - clean-webpack-plugin

今天要來介紹 clean-webpack-plugin 的使用，很單純，目的就是要清除我們在每次執行 webpack 指令時，要清除指定的資料夾，例如：目前每...

Carlos Chang ‧ 2016-12-20

0 Like 0 留言 3882 瀏覽

鐵人賽 Modern Web DAY 19

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

技術 <19 - Plugins 小幫手 02> 產生 bundle 後的 mapping 檔 - webpack-manifest-plugin

在開始之前，我想先將上一篇文章在 webpack.config.js 檔中有用到 html-webpack-plugin 的部份，先註解起來，如下： … //...

Carlos Chang ‧ 2016-12-19

0 Like 0 留言 2925 瀏覽

鐵人賽 Modern Web DAY 18

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

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

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

Carlos Chang ‧ 2016-12-18

0 Like 0 留言 2877 瀏覽

鐵人賽 Modern Web DAY 17

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

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

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

Carlos Chang ‧ 2016-12-17

0 Like 0 留言 2726 瀏覽

鐵人賽 Modern Web DAY 16

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

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

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

Carlos Chang ‧ 2016-12-16

1 Like 0 留言 1941 瀏覽

鐵人賽 Modern Web DAY 15

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

技術 <15 - 再續心法 1> Code Splitting - Using Require

今天要來探討如何使用 require.ensure() 做程式碼分離，直接開始動手做 split point 為了方便測試，先建立全新的 ./index2.ht...

Carlos Chang ‧ 2016-12-15

0 Like 0 留言 1896 瀏覽

鐵人賽 Modern Web DAY 14

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

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

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

Carlos Chang ‧ 2016-12-14

0 Like 1 留言 4699 瀏覽

鐵人賽 Modern Web DAY 13

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

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

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

Carlos Chang ‧ 2016-12-13

0 Like 0 留言 3656 瀏覽

鐵人賽 Modern Web DAY 12

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

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

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

Carlos Chang ‧ 2016-12-12

0 Like 0 留言 6822 瀏覽

鐵人賽 Modern Web DAY 11

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

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

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

Carlos Chang ‧ 2016-12-11

0 Like 0 留言 6875 瀏覽

鐵人賽 Modern Web DAY 10

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

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

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

Carlos Chang ‧ 2016-12-10

1 Like 0 留言 5759 瀏覽

鐵人賽 Modern Web DAY 9

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

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

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

Carlos Chang ‧ 2016-12-09

0 Like 0 留言 2257 瀏覽

鐵人賽 Modern Web DAY 8

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

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

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

Carlos Chang ‧ 2016-12-08

0 Like 0 留言 3599 瀏覽

鐵人賽 Modern Web DAY 7

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

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

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

Carlos Chang ‧ 2016-12-07

2 Like 1 留言 10473 瀏覽

鐵人賽 Modern Web DAY 6

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

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

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

Carlos Chang ‧ 2016-12-06

1 Like 0 留言 5680 瀏覽

鐵人賽 Modern Web DAY 5

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

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

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

Carlos Chang ‧ 2016-12-05

0 Like 0 留言 3711 瀏覽

鐵人賽 Modern Web DAY 4

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

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

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

Carlos Chang ‧ 2016-12-04

1 Like 0 留言 4989 瀏覽

鐵人賽 Modern Web DAY 3

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

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

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

Carlos Chang ‧ 2016-12-03

0 Like 0 留言 5560 瀏覽

鐵人賽 Modern Web DAY 2

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

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

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

Carlos Chang ‧ 2016-12-02

1 Like 0 留言 10006 瀏覽

鐵人賽 Modern Web DAY 1

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

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

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

Carlos Chang ‧ 2016-12-01