iT邦幫忙

鐵人檔案

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

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

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

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

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

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

2016-12-21 ‧ 由 Carlos Chang 分享
DAY 22

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

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

2016-12-22 ‧ 由 Carlos Chang 分享
DAY 23

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

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

2016-12-23 ‧ 由 Carlos Chang 分享
DAY 24

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

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

2016-12-24 ‧ 由 Carlos Chang 分享
DAY 25

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

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

2016-12-25 ‧ 由 Carlos Chang 分享
DAY 26

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

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

2016-12-26 ‧ 由 Carlos Chang 分享
DAY 27

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

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

2016-12-27 ‧ 由 Carlos Chang 分享
DAY 28

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

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

2016-12-28 ‧ 由 Carlos Chang 分享
DAY 29

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

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

2016-12-29 ‧ 由 Carlos Chang 分享
DAY 30

<30 - 最終章> Future!

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

2016-12-30 ‧ 由 Carlos Chang 分享