iT邦幫忙

carlos chang相關文章
共有 30 則文章
鐵人賽 Modern Web DAY 30

技術 <30 - 最終章> Future!

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

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 Modern Web DAY 27

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

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 25

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

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

鐵人賽 Modern Web DAY 24

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 22

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

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

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 Modern Web DAY 20

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

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

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 18

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

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

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 16

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

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

鐵人賽 Modern Web DAY 15

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

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

鐵人賽 Modern Web DAY 14

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

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

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 Modern Web DAY 10

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

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

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 4

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

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

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 2

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

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

鐵人賽 Modern Web DAY 1

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

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