From 30969346e933f006f52bf70a83f641a999188696 Mon Sep 17 00:00:00 2001
From: Peng-Jie <dean.leehom@gmail.com>
Date: Mon, 9 May 2016 22:18:01 +0800
Subject: [PATCH 01/12] wording

---
 part1/README.md                | 2 +-
 part1/example1/README.md       | 2 +-
 zh-TW/part1/README.md          | 2 +-
 zh-TW/part1/example1/README.md | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/part1/README.md b/part1/README.md
index 0ac096b..f5516e5 100644
--- a/part1/README.md
+++ b/part1/README.md
@@ -186,7 +186,7 @@ The really cool, and interesting thing about webpack is that you can `require` m
 JavaScript files.
 
 There is this thing in webpack called a loader. Using these loaders, you can
-`require` anything from `.css` and `.html` to `.png` files.
+`require` anything from `.css` and `.png` to `.html` files.
 
 For example in the diagram above I had
 
diff --git a/part1/example1/README.md b/part1/example1/README.md
index 9e88c0d..e60968b 100644
--- a/part1/example1/README.md
+++ b/part1/example1/README.md
@@ -72,7 +72,7 @@ The really cool and interesting thing about webpack is that you can `require` mo
 javascript files.
 
 There is this thing in webpack called a loader. Using these loaders, you can
-`require` anything from `.css` and `.html` to `.png` files.
+`require` anything from `.css` and `.png` to `.html` files.
 
 For example in the diagram above I had
 
diff --git a/zh-TW/part1/README.md b/zh-TW/part1/README.md
index f995ca0..01f9928 100644
--- a/zh-TW/part1/README.md
+++ b/zh-TW/part1/README.md
@@ -166,7 +166,7 @@ body {
 
 關於 webpack 真的很酷，有趣的事情是，你可以 `require` 更多不只是 JavaScript 的檔案。
 
-在 webpack 這些東西我們稱為 loader。使用這些 loader，你可以 `require` 任何 `.css` 和 `.html`  到 `.png` 檔。
+在 webpack 這些東西我們稱為 loader。使用這些 loader，你可以 `require` 任何 `.css` 和 `.png` 到 `.html` 檔。
 
 例如在上圖我有：
 
diff --git a/zh-TW/part1/example1/README.md b/zh-TW/part1/example1/README.md
index 5960e3a..752164d 100644
--- a/zh-TW/part1/example1/README.md
+++ b/zh-TW/part1/example1/README.md
@@ -67,7 +67,7 @@ body {
 
 關於 webpack 真的很酷，有趣的事情是，你可以 `require` 更多不只是 JavaScript 的檔案。
 
-在 webpack 這些東西我們稱為 loader。使用這些 loader，你可以 `require` 任何 `.css` 和 `.html`  到 `.png` 檔。
+在 webpack 這些東西我們稱為 loader。使用這些 loader，你可以 `require` 任何 `.css` 和 `.png` 到 `.html` 檔。
 
 例如在上圖我有：
 

From 4f0d1512cd1bd0fdfb7f409d3bb47eb257d750c1 Mon Sep 17 00:00:00 2001
From: Peng-Jie <dean.leehom@gmail.com>
Date: Thu, 12 May 2016 15:43:23 +0800
Subject: [PATCH 02/12] fix typo and wording

---
 zh-TW/part1/README.md             | 32 +++++++++++++++----------------
 zh-TW/part1/css-extract/README.md |  6 +++---
 zh-TW/part1/example1/README.md    |  4 ++--
 zh-TW/part1/example3/README.md    |  2 +-
 zh-TW/part1/example5/README.md    |  2 +-
 zh-TW/part1/example6/README.md    |  6 +++---
 zh-TW/part2/README.md             | 14 +++++++-------
 7 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/zh-TW/part1/README.md b/zh-TW/part1/README.md
index 01f9928..6d33a12 100644
--- a/zh-TW/part1/README.md
+++ b/zh-TW/part1/README.md
@@ -12,7 +12,7 @@
 
 ## 需求
 
-至少，希望你了解基本的 node.js 和 npm。
+至少希望你了解基本的 node.js 和 npm。
 
 ## 貢獻
 
@@ -57,16 +57,16 @@
 
 * Bundle JS 檔案 - 讓你可以撰寫模組化的 JavaScript，但是你不需要 inclue 每個 JavaScript `<script>` 的檔案（如果你需要多個 JavaScript 檔案可以透過設定來完成）。
 
-* 在你的前端程式碼中使用 npm packages - npm 在 internet 上是一個大型的 open source 生態系統。有機會你可以儲存你的程式碼，然後到 npm 看一看，可能包含你想要的前端套件。
+* 在你的前端程式碼中使用 npm packages - npm 在 internet 上是一個大型的 open source 生態系統。可以儲存或發佈你的程式碼，你可以到 npm 看一看，可能包含你想要的前端套件。
 
 * ES6 和 ES7 - 加入一些 JavaScript 的新功能，讓撰寫程式碼可以更強大更容易，[請看這裡的介紹](https://github.com/DrkSephy/es6-cheatsheet)。
 
 * Minify 或優化程式碼 - 減少你所分配的檔案大小，好處包括像是更快的將頁面載入。
 
-* 將 LESS 或 SCSS 轉換成 CSS - 更好的方式來撰寫 CSS，
+* 將 LESS 或 SCSS 轉換成 CSS - 使用更好的方式來撰寫 CSS，
 [如果你不熟悉的話，這裡有一些介紹](http://alistapart.com/article/why-sass)。
 
-* 使用 HMR - 增加生產力。每當你儲存程式碼的時候，它可以注入到網頁，而不需將網頁刷新。如果當編輯你的程式碼，你需要維護頁面的狀態，這是非常方便的。
+* 使用 HMR - 增加開發速度。每當你儲存程式碼的時候，它可以注入到網頁，而不需將網頁刷新。如果當編輯你的程式碼，你需要維護頁面的狀態，這是非常方便的。
 
 * 包含任何類型的檔案到你的 JavaScript - 減少對其他 build 工具的需要，讓你可以透過程式的方式修改或使用這些檔案。
 
@@ -164,7 +164,7 @@ body {
 
 你可能會注意到，我在上方的範例做了一些奇怪的事情。我在 JavaScript 檔案中 `require` 一個 css 檔案。
 
-關於 webpack 真的很酷，有趣的事情是，你可以 `require` 更多不只是 JavaScript 的檔案。
+關於 webpack 真的很酷，有趣的事情是，你可以 `require` 其他不只是 JavaScript 的檔案。
 
 在 webpack 這些東西我們稱為 loader。使用這些 loader，你可以 `require` 任何 `.css` 和 `.png` 到 `.html` 檔。
 
@@ -175,13 +175,13 @@ body {
 require('./styles.css')
 ```
 
-如果我在我的 webpack 設定檔中，inclue [style-loader](https://github.com/webpack/style-loader) 和 [css-loader](https://github.com/webpack/css-loader)，這不僅是可以的，還可以實際應用 CSS 到我的網頁。
+如果在我的 webpack 設定檔中，inclue [style-loader](https://github.com/webpack/style-loader) 和 [css-loader](https://github.com/webpack/css-loader)，這是可行的，還可以實際應用 CSS 到我的網頁。
 
 你可以在 webpack 使用多個 loader，這裡只是一個單一的例子。
 
 ### Plugins
 
-Plugin，顧名思義就是為 webpack 增加額外的功能。其中常使用到的一個 plugin 是 `UglifyJsPlugin`，它可以 minify 你的 JavaScript 程式碼。我們之後會介紹如何使用。
+Plugin，顧名思義就是替 webpack 增加額外的功能。其中常使用到的一個 plugin 是 `UglifyJsPlugin`，它可以 minify 你的 JavaScript 程式碼。我們之後會介紹如何使用。
 
 ## 你的 webpack 設定檔案
 
@@ -234,7 +234,7 @@ module.exports = {
 
 [範例三](https://github.com/neighborhood999/WebpackTutorial/tree/master/zh-TW/part1/example3)
 
-想像一下，你使用 webpack 將你的檔案 bundle 在一起，然後你意識到 bundle 後的結果是 900KB。這裡有個問題，但是你可以透過 minify 你的 bundle 檔案來做改善。如果需要做到這一點，你需要使用一個我在前面稍早提到的 [UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) plugin。
+想像一下，你使用 webpack 將你的檔案 bundle 在一起，然後你發現到 bundle 後的結果是 900KB。這裡有個問題，但是你可以透過 minify 你的 bundle 檔案來做改善。如果需要做到這一點，你需要使用一個我在前面稍早提到的 [UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) plugin。
 
 此外，你需要在本機安裝 webpack 才能實際的去使用這個 plugin。
 
@@ -302,7 +302,7 @@ module.exports = {
 
 ## 一個更完整的範例
 
-此外，比起單單使用 JavaScript，使用 webpack 可以做的更多，你可以避免複製-貼上並透過 webpack 管理你的整個專案。
+此外，比起單單使用 JavaScript，使用 webpack 可以做的更多，你可以避免複製、貼上並透過 webpack 管理你的整個專案。
 
 在下面的部份中，我們要使用 webpack 建立一個非常簡單的網站。如果你想要跟著這個範例，建立一個像下方的目錄結構：
 
@@ -321,7 +321,7 @@ MyDirectory
 
 1. [介紹 Loader](#introducing-loaders) - 我們將會加入 loader，這可以讓我 bundle 加入的 CSS。
 2. [加入更多 Plugin](#adding-more-plugins) - 我們加入一個 plugin 來幫助我們建立和使用一個 HTML 檔案。
-3. [開發伺服器](#the-development-server) - 我們會將 webpack 設定檔案分為 `development 和 `production` 兩種版本，然後使用 webpack-dev-server 來查看我們的網站並啟用 HMR。
+3. [開發伺服器](#the-development-server) - 我們會將 webpack 設定檔案分為 `development` 和 `production` 兩種版本，然後使用 webpack-dev-server 來查看我們的網站並啟用 HMR。
 4. [開始撰寫程式](#start-coding) - 我們來實際寫一些 JavaScript。
 
 #### 介紹 Loader
@@ -403,7 +403,7 @@ You may need an appropriate loader to handle this file type.
 
 [範例五](https://github.com/neighborhood999/WebpackTutorial/tree/master/zh-TW/part1/example5)
 
-現在我們的網站有基礎的樣式，但我們還需要實際的網站樣式。
+現在我們的網站有一些基礎了，但我們還需要實際的網站樣式。
 
 我們通過 [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) 來做，它讓我們可以產生一個 HTML 頁面使用現有的。我們將使用一個目前現有的 `index.html`。
 
@@ -540,7 +540,7 @@ module.exports = {
 
 **修改**
 
-1. dev 設定檔省略了優化，當你不斷的 rebuild 時，他們不是必要的。所以不需要 `webpack.optimize` plugins。
+1. dev 設定檔省略了優化，當你不斷的 rebuild 時，他們是不必要的。所以不需要 `webpack.optimize` plugins。
 
 2. dev 設定檔需要對 dev server 做必要的設定，你可以到[這裡](https://webpack.github.io/docs/webpack-dev-server.html)了解更多。
 
@@ -588,7 +588,7 @@ module.exports = {
 
 我也加入一個全新的屬性在 dev 和 prod 設定檔：
 
-* [devtool](https://webpack.github.io/docs/configuration.html#devtool) - 這是協助 debug 的。基本上，當你得到一個錯誤，它會幫助你找到哪裡發生了錯誤，像是 chrome developer console。`source-map` 和 `cheap-eval-source-map` 之間的差異從文件說明有點難解釋。我可以肯定的是，`source-map` 是用於 production，`cheap-eval-source-map` 是用於 `development`。
+* [devtool](https://webpack.github.io/docs/configuration.html#devtool) - 這是協助 debug 的工具。基本上，當你得到一個錯誤，它會幫助你找到哪裡發生了錯誤，像是 chrome developer console。`source-map` 和 `cheap-eval-source-map` 之間的差異從文件說明有點難解釋。我可以肯定的是，`source-map` 是用於 `production`，`cheap-eval-source-map` 是用於 `development`。
 
 如果要執行 dev server，我們可以執行：
 
@@ -624,7 +624,7 @@ npm run dev
 
 你現在可以透過 `npm run dev`，並導到 `http://localhost:8080` 看到你的網站。
 
-**備註：** 當我正在測試這個部份時，我明白到當我修改 `index.html` 檔案時，伺服器不能 hot reload。 解決這個問題的方法在 [html-reload](https://github.com/neighborhood999/WebpackTutorial/tree/master/zh-TW/part1/html-reload)。這裡涵蓋了一些 webpack 設定檔選項的有用資訊，我推薦你可以看一下，但是我把它分開了，因為我覺得會因為這個不太重要的原因，這會延長這個教學課程。
+**備註：** 當我正在測試這個部份時，我了解到，當我修改 `index.html` 檔案時，伺服器不能 hot reload。解決這個問題的方法在 [html-reload](https://github.com/neighborhood999/WebpackTutorial/tree/master/zh-TW/part1/html-reload)。這裡涵蓋了一些 webpack 設定檔選項的有用資訊，我推薦你可以看一下，但是我把它分開了，因為我覺得會因為這個不太重要的原因，這會延長這個教學課程。
 
 #### 開始撰寫程式
 
@@ -672,7 +672,7 @@ if (module.hot) {
 
 然後我們就完成了！
 
-**備註：** 你可能已經注意到在你的 css 被使用之前有些 delay，或許事實上你討厭你的 css 在你的 JavaScript 檔案中。我留了另一個範例：[css-extract](https://github.com/neighborhood999/WebpackTutorial/tree/master/zh-TW/part1/css-extract)，描述如何將你的 CSS 放在不同的檔案。
+**備註：** 你可能已經注意到在你的 css 被使用之前有些 delay，或許事實上你討厭將你的 css 放入到 JavaScript 檔案中。我留了另一個範例：[css-extract](https://github.com/neighborhood999/WebpackTutorial/tree/master/zh-TW/part1/css-extract)，描述如何將你的 CSS 放在不同的檔案。
 
 ## 結論
 
@@ -680,7 +680,7 @@ if (module.hot) {
 
 首先 Webpack 最重要的它是一個模組整合工具。它是一個高度模組化的工具，事實上，它並不是被限於在 ES6 和 React。
 
-現在考慮到
+現在考慮到：
 
 * Part 2 將解決使用 Webpack 透過 Babel 將 ES6 轉換到 ES5。
 * Part 3 將解決使用 Webpack 和 React + Babel。
diff --git a/zh-TW/part1/css-extract/README.md b/zh-TW/part1/css-extract/README.md
index acb4d57..7c0cb8e 100644
--- a/zh-TW/part1/css-extract/README.md
+++ b/zh-TW/part1/css-extract/README.md
@@ -1,6 +1,6 @@
 # 番外 - 提取你的 CSS
 
-好了，你現在已經完成了，但是在 production 你不想要將你的 CSS 檔案放入到你的 JavaScript。為了這個目的，我們將會使用　[Extract Text Plugin](https://github.com/webpack/extract-text-webpack-plugin)。
+好了，你現在已經完成了，但是在 production 你不想要將你的 CSS 檔案放入到你的 JavaScript。為了這個目的，我們將會使用 [Extract Text Plugin](https://github.com/webpack/extract-text-webpack-plugin)。
 
     npm install --save-dev extract-text-webpack-plugin
 
@@ -40,11 +40,11 @@ module.exports = {
 }
 ```
 
-這些修改來自[官方 repo](https://github.com/webpack/extract-text-webpack-plugin) README 的描述。如果你想要知道它是怎麼運作的，可以到官方相關文件做更深入的了解。
+這些修改來自[官方 repository](https://github.com/webpack/extract-text-webpack-plugin) README 的描述。如果你想要知道它是怎麼運作的，可以到官方相關文件做更深入的了解。
 
 > 它在進入點將每個 require("style.css") chunk 成獨立的 css 輸出檔案。所以你的樣式不會在 JavaScript 內，但是它會被分離到一個 css bundle 檔案（styles.css）。如果你的 stylesheet 很大，在 JavaScript bundle 時，stylesheet bundle 會被平行的載入，可以加快載入的速度。
 
-如果現在你執行 `npm run build`，你的 CSS 會必獨立成一個檔案，有趣的是，它已經被引入到你的 `index.html` 了。
+如果現在你執行 `npm run build`，你的 CSS 會被獨立成一個檔案，有趣的是，它已經被引入到你的 `index.html` 了。
 
 ```html
 <html>
diff --git a/zh-TW/part1/example1/README.md b/zh-TW/part1/example1/README.md
index 752164d..bd6f009 100644
--- a/zh-TW/part1/example1/README.md
+++ b/zh-TW/part1/example1/README.md
@@ -65,7 +65,7 @@ body {
 
 你可能會注意到，我在上方的範例做了一些奇怪的事情。我在 JavaScript 檔案中 `require` 一個 css 檔案。
 
-關於 webpack 真的很酷，有趣的事情是，你可以 `require` 更多不只是 JavaScript 的檔案。
+關於 webpack 真的很酷，有趣的事情是，你可以 `require` 其他不只是 JavaScript 的檔案。
 
 在 webpack 這些東西我們稱為 loader。使用這些 loader，你可以 `require` 任何 `.css` 和 `.png` 到 `.html` 檔。
 
@@ -76,6 +76,6 @@ body {
 require('./styles.css')
 ```
 
-如果我在我的 webpack 設定檔中，inclue [style-loader](https://github.com/webpack/style-loader) 和 [css-loader](https://github.com/webpack/css-loader)，這不僅是可以的，還可以實際應用 CSS 到我的網頁。
+如果在我的 webpack 設定檔中，inclue [style-loader](https://github.com/webpack/style-loader) 和 [css-loader](https://github.com/webpack/css-loader)，這是可行的，還可以實際應用 CSS 到我的網頁。
 
 你可以在 webpack 使用多個 loader，這裡只是一個單一的例子。
diff --git a/zh-TW/part1/example3/README.md b/zh-TW/part1/example3/README.md
index 47e53be..96baec1 100644
--- a/zh-TW/part1/example3/README.md
+++ b/zh-TW/part1/example3/README.md
@@ -1,6 +1,6 @@
 # 範例三 - 介紹 Plugins
 
-想像一下，你使用 webpack 將你的檔案 bundle 在一起，然後你意識到 bundle 後的結果是 900KB。這裡有個問題，但是你可以透過 minify 你的 bundle 檔案來做改善。如果需要做到這一點，你需要使用一個我在前面稍早提到的 [UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) plugin。
+想像一下，你使用 webpack 將你的檔案 bundle 在一起，然後你發現到 bundle 後的結果是 900KB。這裡有個問題，但是你可以透過 minify 你的 bundle 檔案來做改善。如果需要做到這一點，你需要使用一個我在前面稍早提到的 [UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) plugin。
 
 此外，你需要在本機安裝 webpack 才能實際的去使用這個 plugin。
 
diff --git a/zh-TW/part1/example5/README.md b/zh-TW/part1/example5/README.md
index 2677f58..ff026cf 100644
--- a/zh-TW/part1/example5/README.md
+++ b/zh-TW/part1/example5/README.md
@@ -1,6 +1,6 @@
 # 範例五 - 加入更多的 Plugin
 
-現在我們的網站有基礎的樣式，但我們還需要實際的網站樣式。
+現在我們的網站有一些基礎了，但我們還需要實際的網站樣式。
 
 我們通過 [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) 來做，它讓我們可以產生一個 HTML 頁面使用現有的。我們將使用一個目前現有的 `index.html`。
 
diff --git a/zh-TW/part1/example6/README.md b/zh-TW/part1/example6/README.md
index 1ec6964..499c3cc 100644
--- a/zh-TW/part1/example6/README.md
+++ b/zh-TW/part1/example6/README.md
@@ -48,7 +48,7 @@ module.exports = {
 
 **修改**
 
-1. dev 設定檔省略了優化，當你不斷的 rebuild 時，他們不是必要的。所以不需要 `webpack.optimize` plugins。
+1. dev 設定檔省略了優化，當你不斷的 rebuild 時，他們是不必要的。所以不需要 `webpack.optimize` plugins。
 
 2. dev 設定檔需要對 dev server 做必要的設定，你可以到[這裡](https://webpack.github.io/docs/webpack-dev-server.html)了解更多。
 
@@ -97,7 +97,7 @@ module.exports = {
 
 我也加入一個全新的屬性在 dev 和 prod 的設定檔：
 
-* [devtool](https://webpack.github.io/docs/configuration.html#devtool) - 這是協助 debug 的。基本上，當你得到一個錯誤，它會幫助你找到哪裡發生了錯誤，像是 chrome developer console。`source-map` 和 `cheap-eval-source-map` 之間的差異從文件說明有點難解釋。我可以肯定的是，`source-map` 是用於 production，`cheap-eval-source-map` 是用於 `development`。
+* [devtool](https://webpack.github.io/docs/configuration.html#devtool) - 這是協助 debug 的工具。基本上，當你得到一個錯誤，它會幫助你找到哪裡發生了錯誤，像是 chrome developer console。`source-map` 和 `cheap-eval-source-map` 之間的差異從文件說明有點難解釋。我可以肯定的是，`source-map` 是用於 `production`，`cheap-eval-source-map` 是用於 `development`。
 
 如果要執行 dev server，我們可以執行：
 
@@ -133,4 +133,4 @@ npm run dev
 
 你現在可以透過 `npm run dev`，並導到 `http://localhost:8080` 看到你的網站。
 
-**備註：** 當我正在測試這個部份時，我明白到當我修改 `index.html` 檔案時，伺服器不能 hot reload。 解決這個問題的方法在 [html-reload](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/html-reload)。這裡涵蓋了一些 webpack 設定檔選項的有用資訊，我推薦你可以看一下，但是我把它分開了，因為我覺得會因為這個不太重要的原因，這會延長這個教學。
+**備註：** 當我正在測試這個部份時，我了解到，當我修改 `index.html` 檔案時，伺服器不能 hot reload。解決這個問題的方法在 [html-reload](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/html-reload)。這裡涵蓋了一些 webpack 設定檔選項的有用資訊，我推薦你可以看一下，但是我把它分開了，因為我覺得會因為這個不太重要的原因，這會延長這個教學課程。
diff --git a/zh-TW/part2/README.md b/zh-TW/part2/README.md
index 839642e..e3d8c63 100644
--- a/zh-TW/part2/README.md
+++ b/zh-TW/part2/README.md
@@ -1,15 +1,15 @@
 # Webpack 初學者教學課程 Part 2 - 使用 Webpack 與 Babel :zap:
 
-現在我們已經學習了基礎的 webpack 使用方式，為了撰寫 ES6，我們要學會利用 babel 6，因為它是 JavaScript 新的規範。
+現在我們已經學習了基礎的 webpack 使用方式，為了撰寫 ES6，我們要學會利用 babel 6，因為 ES6 是 JavaScript 新的規範。
 
-如果你曾經撰寫過 ES6，應該就不想再回去寫 ES5 了。如果你還沒有機會撰寫 ES6，很大的原因可能是因為*不了解*開發環境該使用哪些設定選項，因為這些很令人沮喪。
+如果你曾經撰寫過 ES6，應該就不想再回去寫 ES5 了。如果你還沒有機會撰寫 ES6，很大的原因可能是因為*不了解*開發環境該使用哪些設定選項，因為那些設定很令人沮喪。
 
 我希望這個教學課程可以讓這些過程可以變得更容易。
 
 ## 需求
 
 1. 如果你還沒有準備好，請先閱讀 [part 1][2]
-2. 有關 ES6 的概述，[這個](https://github.com/DrkSephy/es6-cheatsheet)是一個很棒的資源。
+2. 有關 ES6 的概述，[es6-cheatsheet](https://github.com/DrkSephy/es6-cheatsheet) 是一個很棒的資源。
 
 ## 貢獻
 
@@ -32,7 +32,7 @@
 
 ## Babel
 
-如果你想要有更深入的說明，和更細微的設定 babel ，請參考這個[手冊][1]。我在這裡了解了一些基本的設定。
+如果你想要有更深入的說明，和更細微的設定 babel，請參考這個[手冊][1]。我在這裡了解了一些基本的設定。
 
 ### Babel 是做什麼用的？
 
@@ -70,7 +70,7 @@ var square = function square(n) {
 
 你只需要指定一個 `presets` 選項，下面是描述的摘錄：
 
-> JavaScript 也有一些提案需要 TC39（背後的 ECMASript 標準為員會）的處理，才能將這些納入到標準中。
+> JavaScript 也有一些提案需要 TC39（背後的 ECMAScript 標準為員會）的處理，才能將這些納入到標準中。
 
 > 這個程序被分為 5 個 statge（0-4）。如果提案獲得更多的同意，通過各個 stage，就很容易被接受納入標準中，最後在 stage 4 中被接受納入標準。
 
@@ -90,7 +90,7 @@ var square = function square(n) {
 
 ## Webpack
 
-我們可以使用與[part 1-範例七](https://github.com/neighborhood999/WebpackTutorial/tree/master/zh-TW/part1/example7)相同的設定檔，但是需要加入 ES6 所需要的功能。
+我們可以使用與 [part 1-範例七](https://github.com/neighborhood999/WebpackTutorial/tree/master/zh-TW/part1/example7)相同的設定檔，但是需要加入 ES6 所需要的功能。
 
 目前設定檔：
 
@@ -400,7 +400,7 @@ if (process.env.NODE_ENV !== 'production') {
 
 ## 結論
 
-我已經把所有這一切的最終結果放入到[範例 1](https://github.com/neighborhood999/WebpackTutorial/tree/master/part2/example1)。如果你仍然有不理解的地方，可以在 issue 提出你的問題。
+我已經把所有這一切的最終結果放入到[範例一](https://github.com/neighborhood999/WebpackTutorial/tree/master/part2/example1)。如果你仍然有不理解的地方，可以在 issue 提出你的問題。
 
 所以現在我們可以輕鬆的撰寫 ES6 程式碼，此外，也讓我們了解到如何撰寫設定檔 :tada:！
 

From aeebb831f8727827b6f8da1854ee27ea206db2c9 Mon Sep 17 00:00:00 2001
From: Peng-Jie <dean.leehom@gmail.com>
Date: Sun, 29 May 2016 17:34:50 +0800
Subject: [PATCH 03/12] wording and fix table of content link

---
 zh-TW/part1/README.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/zh-TW/part1/README.md b/zh-TW/part1/README.md
index 6d33a12..74d363a 100644
--- a/zh-TW/part1/README.md
+++ b/zh-TW/part1/README.md
@@ -26,7 +26,7 @@
   * [Bundling](#bundling)
   * [Loaders](#loaders)
   * [Plugins](#plugins)
-* [你的設定檔案](#你的設定檔案)
+* [你的 webpack 設定檔案](#你的-webpack-設定檔案)
   * [一個簡單的範例](#一個簡單的範例)
   * [介紹 Plugins](#介紹-plugins)
 * [一個更完整的範例](#一個更完整的範例)
@@ -41,10 +41,10 @@
 
 因為每個 react 或 redux 教學課程都假設你知道什麼是 webpack。:cry:
 
-以下這些是更現實的原因，你可能需要使用 webpack。
+以下這些是更現實的原因，你可能會需要使用 webpack。
 
 你可以：
-  * Bundle 你的 js 檔案變成單一的檔案
+  * 將你的 js 檔案 Bundle 變成單一的檔案
   * 在你的前端程式碼中使用 npm packages
   * 撰寫 JavaScript ES6 或 ES7（需要透過 babel 來幫助）
   * Minify 或優化程式碼
@@ -55,13 +55,13 @@
 
 ##### 為什麼我需要這些功能？
 
-* Bundle JS 檔案 - 讓你可以撰寫模組化的 JavaScript，但是你不需要 inclue 每個 JavaScript `<script>` 的檔案（如果你需要多個 JavaScript 檔案可以透過設定來完成）。
+* Bundle JS 檔案 - 讓你可以撰寫模組化的 JavaScript，但是你不需要 include 每個 JavaScript `<script>` 的檔案（如果你需要多個 JavaScript 檔案可以透過設定來完成）。
 
 * 在你的前端程式碼中使用 npm packages - npm 在 internet 上是一個大型的 open source 生態系統。可以儲存或發佈你的程式碼，你可以到 npm 看一看，可能包含你想要的前端套件。
 
-* ES6 和 ES7 - 加入一些 JavaScript 的新功能，讓撰寫程式碼可以更強大更容易，[請看這裡的介紹](https://github.com/DrkSephy/es6-cheatsheet)。
+* ES6 和 ES7 - 加入一些 JavaScript 的新功能，讓撰寫程式碼可以更容易而且更強大，[請看這裡的介紹](https://github.com/DrkSephy/es6-cheatsheet)。
 
-* Minify 或優化程式碼 - 減少你所分配的檔案大小，好處包括像是更快的將頁面載入。
+* Minify 或優化程式碼 - 減少你的檔案大小，好處包括像是更快的將頁面載入。
 
 * 將 LESS 或 SCSS 轉換成 CSS - 使用更好的方式來撰寫 CSS，
 [如果你不熟悉的話，這裡有一些介紹](http://alistapart.com/article/why-sass)。

From 17239f59afb49391d292ddb38477ac3aba6cb13c Mon Sep 17 00:00:00 2001
From: Youngjae Ji <zirho6@gmail.com>
Date: Mon, 13 Jun 2016 20:47:22 -0700
Subject: [PATCH 04/12] :memo: Change to use eslint-config-airbnb-base since
 'eslint-config-airbnb/base' is deprecated. check out (#33)

---
 part2/README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/part2/README.md b/part2/README.md
index 3e603f7..6ba49a5 100644
--- a/part2/README.md
+++ b/part2/README.md
@@ -366,14 +366,14 @@ that eslint lets you inherit from other people's configs. I always like to use a
 To get started, we need to install eslint as well as airbnb's config
 
     npm install -g eslint
-    npm install --save-dev eslint eslint-config-airbnb
+    npm install --save-dev eslint eslint-config-airbnb-base
 
 Our starting config will look like:
 
 ```javascript
 // .eslintrc
 {
-  "extends": "airbnb/base" // 'airbnb/base' because 'airbnb' assumes usage of react
+  "extends": "airbnb-base" // 'airbnb-base' because 'airbnb' assumes usage of react
 }
 ```
 
@@ -383,7 +383,7 @@ all these rules mean, or tweak them to fit your preferences look [here](http://e
 ```javascript
 // .eslintrc
 {
-  "extends": "airbnb/base",
+  "extends": "airbnb-base",
   "rules": {
     "comma-dangle": 0,
     "no-console": 0,
@@ -405,7 +405,7 @@ and tweaking our config once more to add [babel specific rules](https://github.c
 ```javascript
 // .eslintrc
 {
-  "extends": "airbnb/base",
+  "extends": "airbnb-base",
   "parser": "babel-eslint",
   "rules": {
     "comma-dangle": 0,

From 8d51e5e6ad7b6a23b09b75ddb4efbe6c7c7aee16 Mon Sep 17 00:00:00 2001
From: AriaFallah <aria@fallah.us>
Date: Tue, 14 Jun 2016 14:45:29 -0400
Subject: [PATCH 05/12] :art: update to use eslint-config-airbnb-base

---
 part2/example1/package.json | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/part2/example1/package.json b/part2/example1/package.json
index 6ae66e6..88de612 100644
--- a/part2/example1/package.json
+++ b/part2/example1/package.json
@@ -12,18 +12,18 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "babel-core": "^6.4.5",
-    "babel-eslint": "^4.1.8",
-    "babel-loader": "^6.2.2",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-stage-2": "^6.3.13",
+    "babel-core": "^6.9.1",
+    "babel-eslint": "^6.0.4",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-stage-2": "^6.5.0",
     "css-loader": "^0.23.1",
-    "eslint": "^1.10.3",
-    "eslint-config-airbnb": "^5.0.0",
-    "eslint-plugin-babel": "^3.1.0",
-    "html-webpack-plugin": "^2.8.1",
-    "style-loader": "^0.13.0",
-    "webpack": "^1.12.13",
+    "eslint": "^2.12.0",
+    "eslint-config-airbnb-base": "^3.0.1",
+    "eslint-plugin-babel": "^3.2.0",
+    "html-webpack-plugin": "^2.21.0",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.13.1",
     "webpack-dev-server": "^1.14.1"
   },
   "dependencies": {

From 2091b0f01f011deb1fbcb8512159c5b8f2eeb701 Mon Sep 17 00:00:00 2001
From: Peng Jie <dean.leehom@gmail.com>
Date: Wed, 22 Jun 2016 20:19:33 +0800
Subject: [PATCH 06/12] Fix typo: `OccurenceOrderPlugin` to
 `OccurrenceOrderPlugin` (#36)

---
 part1/README.md                                | 10 +++++-----
 part1/css-extract/webpack.config.prod.js       |  2 +-
 part1/example1/webpack.config.js               |  2 +-
 part1/example3/webpack.config.js               |  2 +-
 part1/example4/webpack.config.js               |  2 +-
 part1/example5/webpack.config.js               |  2 +-
 part1/example6/webpack.config.prod.js          |  2 +-
 part1/example7/webpack.config.prod.js          |  2 +-
 part1/html-reload/webpack.config.prod.js       |  2 +-
 part2/README.md                                |  8 ++++----
 part2/example1/webpack.config.prod.js          |  2 +-
 zh-TW/part1/README.md                          | 10 +++++-----
 zh-TW/part1/css-extract/webpack.config.prod.js |  2 +-
 zh-TW/part1/example1/webpack.config.js         |  2 +-
 zh-TW/part1/example3/webpack.config.js         |  2 +-
 zh-TW/part1/example4/webpack.config.js         |  2 +-
 zh-TW/part1/example5/webpack.config.js         |  2 +-
 zh-TW/part1/example6/webpack.config.prod.js    |  2 +-
 zh-TW/part1/example7/webpack.config.prod.js    |  2 +-
 zh-TW/part1/html-reload/README.md              |  2 +-
 zh-TW/part1/html-reload/webpack.config.prod.js |  2 +-
 zh-TW/part2/README.md                          |  4 ++--
 zh-TW/part2/example1/webpack.config.prod.js    |  2 +-
 23 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/part1/README.md b/part1/README.md
index f5516e5..fee08ba 100644
--- a/part1/README.md
+++ b/part1/README.md
@@ -300,7 +300,7 @@ Going over the new properties one by one:
 This time, when you run `webpack`, now that you have the `UglifyJsPlugin` this could reduce your
 imaginary 900KB file to 200KB through processes such as removing all the whitespace.
 
-You can also add the [OccurenceOrderPlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin)
+You can also add the [OccurrenceOrderPlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin)
 
 > Assign the module and chunk ids by occurrence count. Ids that are used often get lower (shorter) ids. This makes ids predictable, reduces to total file size and is recommended.
 
@@ -323,7 +323,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin()
+    new webpack.optimize.OccurrenceOrderPlugin()
   ]
 }
 ```
@@ -387,7 +387,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin()
+    new webpack.optimize.OccurrenceOrderPlugin()
   ],
   module: {
     loaders: [{
@@ -470,7 +470,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new HtmlWebpackPlugin({
       template: './src/index.html'
     })
@@ -622,7 +622,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new HtmlWebpackPlugin({
       template: './src/index.html'
     })
diff --git a/part1/css-extract/webpack.config.prod.js b/part1/css-extract/webpack.config.prod.js
index e6078a4..6a1aaac 100644
--- a/part1/css-extract/webpack.config.prod.js
+++ b/part1/css-extract/webpack.config.prod.js
@@ -16,7 +16,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new HtmlWebpackPlugin({
       template: './src/index.html'
     }),
diff --git a/part1/example1/webpack.config.js b/part1/example1/webpack.config.js
index 04c29eb..10baa40 100644
--- a/part1/example1/webpack.config.js
+++ b/part1/example1/webpack.config.js
@@ -13,7 +13,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin()
+    new webpack.optimize.OccurrenceOrderPlugin()
   ],
   module: {
     loaders: [{
diff --git a/part1/example3/webpack.config.js b/part1/example3/webpack.config.js
index 0b24833..2e1056f 100644
--- a/part1/example3/webpack.config.js
+++ b/part1/example3/webpack.config.js
@@ -13,6 +13,6 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin()
+    new webpack.optimize.OccurrenceOrderPlugin()
   ]
 }
diff --git a/part1/example4/webpack.config.js b/part1/example4/webpack.config.js
index 04c29eb..10baa40 100644
--- a/part1/example4/webpack.config.js
+++ b/part1/example4/webpack.config.js
@@ -13,7 +13,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin()
+    new webpack.optimize.OccurrenceOrderPlugin()
   ],
   module: {
     loaders: [{
diff --git a/part1/example5/webpack.config.js b/part1/example5/webpack.config.js
index 6bab936..0963301 100644
--- a/part1/example5/webpack.config.js
+++ b/part1/example5/webpack.config.js
@@ -14,7 +14,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new HtmlWebpackPlugin({
       template: './src/index.html'
     })
diff --git a/part1/example6/webpack.config.prod.js b/part1/example6/webpack.config.prod.js
index ed72d58..387cd73 100644
--- a/part1/example6/webpack.config.prod.js
+++ b/part1/example6/webpack.config.prod.js
@@ -15,7 +15,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new HtmlWebpackPlugin({
       template: './src/index.html'
     })
diff --git a/part1/example7/webpack.config.prod.js b/part1/example7/webpack.config.prod.js
index ed72d58..387cd73 100644
--- a/part1/example7/webpack.config.prod.js
+++ b/part1/example7/webpack.config.prod.js
@@ -15,7 +15,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new HtmlWebpackPlugin({
       template: './src/index.html'
     })
diff --git a/part1/html-reload/webpack.config.prod.js b/part1/html-reload/webpack.config.prod.js
index 8c60d7a..03e1d09 100644
--- a/part1/html-reload/webpack.config.prod.js
+++ b/part1/html-reload/webpack.config.prod.js
@@ -15,7 +15,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new HtmlWebpackPlugin({
       template: './src/index.html'
     }),
diff --git a/part2/README.md b/part2/README.md
index 6ba49a5..06f1075 100644
--- a/part2/README.md
+++ b/part2/README.md
@@ -168,7 +168,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new HtmlWebpackPlugin({
       template: './src/index.html'
     })
@@ -218,8 +218,8 @@ by an extreme amount.
 
 `include` prevents this by specifying that this loader only applies to `.js` files in your `src` directory.
 
-Alternatively you could change `include: path.join(__dirname, 'src')` to `exclude: /node_modules/` which will then 
-include everything but the `node_modules` folder. More information can be found [here](https://webpack.github.io/docs/configuration.html#module-loaders). 
+Alternatively you could change `include: path.join(__dirname, 'src')` to `exclude: /node_modules/` which will then
+include everything but the `node_modules` folder. More information can be found [here](https://webpack.github.io/docs/configuration.html#module-loaders).
 
 ## We are Done?
 
@@ -291,7 +291,7 @@ plugins: [
       warnings: false,
     },
   }),
-  new webpack.optimize.OccurenceOrderPlugin(),
+  new webpack.optimize.OccurrenceOrderPlugin(),
   new HtmlWebpackPlugin({
     template: './src/index.html'
   }),
diff --git a/part2/example1/webpack.config.prod.js b/part2/example1/webpack.config.prod.js
index b984c05..6ef5a28 100644
--- a/part2/example1/webpack.config.prod.js
+++ b/part2/example1/webpack.config.prod.js
@@ -17,7 +17,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new HtmlWebpackPlugin({
       template: './src/index.html'
     }),
diff --git a/zh-TW/part1/README.md b/zh-TW/part1/README.md
index 74d363a..e420616 100644
--- a/zh-TW/part1/README.md
+++ b/zh-TW/part1/README.md
@@ -270,7 +270,7 @@ module.exports = {
 
 這個時候，當我們執行 `webpack`，`UglifyJsPlugin` 通過像是移除所有空白的處理，可以將你的檔案減少至 200KB。
 
-你也可以加入 [OccurenceOrderPlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin)。
+你也可以加入 [OccurrenceOrderPlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin)。
 
 > 透過發生次數分配 module 和 chunk 的 id。一些常用的 Id 取得較低（短）的 id。這使得 id 可以預測，減少檔案的大小和建議。
 
@@ -293,7 +293,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin()
+    new webpack.optimize.OccurrenceOrderPlugin()
   ]
 }
 ```
@@ -351,7 +351,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin()
+    new webpack.optimize.OccurrenceOrderPlugin()
   ],
   module: {
     loaders: [{
@@ -431,7 +431,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new HtmlWebpackPlugin({
       template: './src/index.html'
     })
@@ -572,7 +572,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new HtmlWebpackPlugin({
       template: './src/index.html'
     })
diff --git a/zh-TW/part1/css-extract/webpack.config.prod.js b/zh-TW/part1/css-extract/webpack.config.prod.js
index e6078a4..6a1aaac 100644
--- a/zh-TW/part1/css-extract/webpack.config.prod.js
+++ b/zh-TW/part1/css-extract/webpack.config.prod.js
@@ -16,7 +16,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new HtmlWebpackPlugin({
       template: './src/index.html'
     }),
diff --git a/zh-TW/part1/example1/webpack.config.js b/zh-TW/part1/example1/webpack.config.js
index 04c29eb..10baa40 100644
--- a/zh-TW/part1/example1/webpack.config.js
+++ b/zh-TW/part1/example1/webpack.config.js
@@ -13,7 +13,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin()
+    new webpack.optimize.OccurrenceOrderPlugin()
   ],
   module: {
     loaders: [{
diff --git a/zh-TW/part1/example3/webpack.config.js b/zh-TW/part1/example3/webpack.config.js
index 0b24833..2e1056f 100644
--- a/zh-TW/part1/example3/webpack.config.js
+++ b/zh-TW/part1/example3/webpack.config.js
@@ -13,6 +13,6 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin()
+    new webpack.optimize.OccurrenceOrderPlugin()
   ]
 }
diff --git a/zh-TW/part1/example4/webpack.config.js b/zh-TW/part1/example4/webpack.config.js
index 04c29eb..10baa40 100644
--- a/zh-TW/part1/example4/webpack.config.js
+++ b/zh-TW/part1/example4/webpack.config.js
@@ -13,7 +13,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin()
+    new webpack.optimize.OccurrenceOrderPlugin()
   ],
   module: {
     loaders: [{
diff --git a/zh-TW/part1/example5/webpack.config.js b/zh-TW/part1/example5/webpack.config.js
index 6bab936..0963301 100644
--- a/zh-TW/part1/example5/webpack.config.js
+++ b/zh-TW/part1/example5/webpack.config.js
@@ -14,7 +14,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new HtmlWebpackPlugin({
       template: './src/index.html'
     })
diff --git a/zh-TW/part1/example6/webpack.config.prod.js b/zh-TW/part1/example6/webpack.config.prod.js
index ed72d58..387cd73 100644
--- a/zh-TW/part1/example6/webpack.config.prod.js
+++ b/zh-TW/part1/example6/webpack.config.prod.js
@@ -15,7 +15,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new HtmlWebpackPlugin({
       template: './src/index.html'
     })
diff --git a/zh-TW/part1/example7/webpack.config.prod.js b/zh-TW/part1/example7/webpack.config.prod.js
index ed72d58..387cd73 100644
--- a/zh-TW/part1/example7/webpack.config.prod.js
+++ b/zh-TW/part1/example7/webpack.config.prod.js
@@ -15,7 +15,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new HtmlWebpackPlugin({
       template: './src/index.html'
     })
diff --git a/zh-TW/part1/html-reload/README.md b/zh-TW/part1/html-reload/README.md
index 7d6e92b..b46d0e8 100644
--- a/zh-TW/part1/html-reload/README.md
+++ b/zh-TW/part1/html-reload/README.md
@@ -88,7 +88,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new HtmlWebpackPlugin({
       template: './src/index.html'
     }),
diff --git a/zh-TW/part1/html-reload/webpack.config.prod.js b/zh-TW/part1/html-reload/webpack.config.prod.js
index 8c60d7a..03e1d09 100644
--- a/zh-TW/part1/html-reload/webpack.config.prod.js
+++ b/zh-TW/part1/html-reload/webpack.config.prod.js
@@ -15,7 +15,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new HtmlWebpackPlugin({
       template: './src/index.html'
     }),
diff --git a/zh-TW/part2/README.md b/zh-TW/part2/README.md
index e3d8c63..3ca628f 100644
--- a/zh-TW/part2/README.md
+++ b/zh-TW/part2/README.md
@@ -151,7 +151,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new HtmlWebpackPlugin({
       template: './src/index.html'
     })
@@ -260,7 +260,7 @@ plugins: [
       warnings: false,
     },
   }),
-  new webpack.optimize.OccurenceOrderPlugin(),
+  new webpack.optimize.OccurrenceOrderPlugin(),
   new HtmlWebpackPlugin({
     template: './src/index.html'
   }),
diff --git a/zh-TW/part2/example1/webpack.config.prod.js b/zh-TW/part2/example1/webpack.config.prod.js
index b984c05..6ef5a28 100644
--- a/zh-TW/part2/example1/webpack.config.prod.js
+++ b/zh-TW/part2/example1/webpack.config.prod.js
@@ -17,7 +17,7 @@ module.exports = {
         warnings: false,
       },
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new HtmlWebpackPlugin({
       template: './src/index.html'
     }),

From ebe5620a5e6898349cc6d5a88dc0b0f002e1f4ee Mon Sep 17 00:00:00 2001
From: Youngjae Ji <zirho6@gmail.com>
Date: Fri, 24 Jun 2016 07:08:19 -0700
Subject: [PATCH 07/12] Change to install eslint on local to match the scope
 plugin package installed (#35)

if they are installed in different scope, you get errors like below
```
Cannot find module 'eslint-config-airbnb-base'
Referenced from: /Projects/web-app/.eslintrc
Error: Cannot find module 'eslint-config-airbnb-base'
```
And install eslint-cli to access it just like globally installed
package.
---
 part2/README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/part2/README.md b/part2/README.md
index 06f1075..b60e3e4 100644
--- a/part2/README.md
+++ b/part2/README.md
@@ -365,7 +365,8 @@ that eslint lets you inherit from other people's configs. I always like to use a
 
 To get started, we need to install eslint as well as airbnb's config
 
-    npm install -g eslint
+    npm install eslint
+    npm install -g eslint-cli
     npm install --save-dev eslint eslint-config-airbnb-base
 
 Our starting config will look like:

From bbe0422aea73150fc59b014b1aa044e4d20af668 Mon Sep 17 00:00:00 2001
From: Peng-Jie <dean.leehom@gmail.com>
Date: Tue, 30 Aug 2016 07:59:04 +0800
Subject: [PATCH 08/12] Fix link

---
 zh-TW/part1/README.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/zh-TW/part1/README.md b/zh-TW/part1/README.md
index e420616..55f8e9f 100644
--- a/zh-TW/part1/README.md
+++ b/zh-TW/part1/README.md
@@ -319,12 +319,12 @@ MyDirectory
 
 #### 內容
 
-1. [介紹 Loader](#introducing-loaders) - 我們將會加入 loader，這可以讓我 bundle 加入的 CSS。
-2. [加入更多 Plugin](#adding-more-plugins) - 我們加入一個 plugin 來幫助我們建立和使用一個 HTML 檔案。
-3. [開發伺服器](#the-development-server) - 我們會將 webpack 設定檔案分為 `development` 和 `production` 兩種版本，然後使用 webpack-dev-server 來查看我們的網站並啟用 HMR。
-4. [開始撰寫程式](#start-coding) - 我們來實際寫一些 JavaScript。
+1. [介紹 Loaders](#介紹-loaders) - 我們將會加入 loader，這可以讓我 bundle 加入的 CSS。
+2. [加入更多的 Plugins](#加入更多的-plugins) - 我們加入一個 plugin 來幫助我們建立和使用一個 HTML 檔案。
+3. [開發伺服器](#開發伺服器) - 我們會將 webpack 設定檔案分為 `development` 和 `production` 兩種版本，然後使用 webpack-dev-server 來查看我們的網站並啟用 HMR。
+4. [開始撰寫程式](#開始撰寫程式) - 我們來實際寫一些 JavaScript。
 
-#### 介紹 Loader
+#### 介紹 Loaders
 
 [範例四](https://github.com/neighborhood999/WebpackTutorial/tree/master/zh-TW/part1/example4)
 

From 5a616a069e5d9e2ac3b82be757a00277d96a0008 Mon Sep 17 00:00:00 2001
From: Yu Chung-Jen <YuCJ@users.noreply.github.com>
Date: Sun, 8 Jan 2017 18:01:38 +0800
Subject: [PATCH 09/12] Update README.md

Update the translation of "If you want webpack to build every time you change a file"
Ref: https://webpack.github.io/docs/cli.html
---
 zh-TW/part1/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/zh-TW/part1/README.md b/zh-TW/part1/README.md
index 55f8e9f..d8b09a8 100644
--- a/zh-TW/part1/README.md
+++ b/zh-TW/part1/README.md
@@ -88,7 +88,7 @@
 
     webpack
 
-如果你想要在 webpack 每次 build 的時候查看改變的檔案：
+如果你想要 webpack 在你每次變更儲存檔案後自動執行 build ：
 
     webpack --watch
 

From 66c239fa8054bd00620811ef653fc2e2c96a9051 Mon Sep 17 00:00:00 2001
From: Yu Chung-Jen <YuCJ@users.noreply.github.com>
Date: Sun, 8 Jan 2017 18:16:25 +0800
Subject: [PATCH 10/12] Update part1 translation

Update the translation
---
 zh-TW/part1/README.md | 44 +++++++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/zh-TW/part1/README.md b/zh-TW/part1/README.md
index d8b09a8..35a4725 100644
--- a/zh-TW/part1/README.md
+++ b/zh-TW/part1/README.md
@@ -222,19 +222,19 @@ module.exports = {
 
 我們一個一個複習這些屬性：
 
-* [entry](https://webpack.github.io/docs/configuration.html#entry) - 這是你的 bundle 的進入點，這是我們在討論 [bundling](#bundling) 的部分。`entry` 是一個陣列，根據你的需求，webpack 允許可以有多個進入點，來產生多個 bundle 檔案。
+* [entry](https://webpack.github.io/docs/configuration.html#entry) - 這是你的 bundle 的進入點，我們曾在前面 [bundling](#bundling) 的部分討論過它。`entry` 是一個陣列，根據你的需求，webpack 允許可以有多個進入點，來產生多個 bundle 檔案。
 
-* [output](https://webpack.github.io/docs/configuration.html#output) - 由 webpack 規定的形式輸出。
-  * [path](https://webpack.github.io/docs/configuration.html#output-path) - bundle 檔案位置。
+* [output](https://webpack.github.io/docs/configuration.html#output) - 宣告 webpack 輸出的形式。
+  * [path](https://webpack.github.io/docs/configuration.html#output-path) - 存放 bundle 檔案的位置。
   * [filename](https://webpack.github.io/docs/configuration.html#output-filename) - bundle 檔案名稱。
 
-當你執行 `webpack`，會在你的 dist 資料夾建立一個叫做 `bundle.js` 的檔案。
+根據上面的設定，當你執行 `webpack`，會在你的 dist 資料夾建立一個叫做 `bundle.js` 的檔案。
 
 ### 介紹 Plugins
 
 [範例三](https://github.com/neighborhood999/WebpackTutorial/tree/master/zh-TW/part1/example3)
 
-想像一下，你使用 webpack 將你的檔案 bundle 在一起，然後你發現到 bundle 後的結果是 900KB。這裡有個問題，但是你可以透過 minify 你的 bundle 檔案來做改善。如果需要做到這一點，你需要使用一個我在前面稍早提到的 [UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) plugin。
+想像一下，你使用 webpack 將你的檔案 bundle 在一起，然後你發現到 bundle 後的結果是 900KB。這是個問題，但是你可以透過 minify 你的 bundle 檔案來做改善。要做到這一點，你需要使用一個我在前面稍早提到的 [UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) plugin。
 
 此外，你需要在本機安裝 webpack 才能實際的去使用這個 plugin。
 
@@ -265,14 +265,14 @@ module.exports = {
 ```
 我們一個一個複習這些屬性：
 
-* plugins - 一個可以儲存你的 plugin 的陣列。
-  * [webpack.optimize.UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) - Minify 你的程式碼，並顯示警告訊息。
+* plugins - 一個含有你的 plugins 的陣列。
+  * [webpack.optimize.UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) - Minify 你的程式碼，並不顯示警告訊息。
 
-這個時候，當我們執行 `webpack`，`UglifyJsPlugin` 通過像是移除所有空白的處理，可以將你的檔案減少至 200KB。
+如此一來，當我們執行 `webpack`，`UglifyJsPlugin` 透過像是移除所有空白等處理，可以將你的檔案減少至 200KB。
 
 你也可以加入 [OccurrenceOrderPlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin)。
 
-> 透過發生次數分配 module 和 chunk 的 id。一些常用的 Id 取得較低（短）的 id。這使得 id 可以預測，減少檔案的大小和建議。
+> 根據調用次數指定 module 和 chunk 的 id。越常用的 id 較小（短）。這使得 id 可以預測，可以減少檔案的大小，並是推薦的方法。
 
 老實說，我不太確定底層的機制是如何工作的，但在根據目前 [webpack2 beta 的預設情況下](https://gist.github.com/sokra/27b24881210b56bbaff7)，所以我將它包含在內。
 
@@ -298,7 +298,7 @@ module.exports = {
 }
 ```
 
-所以現在我們寫了一個設定檔讓我們可以 minify 和 bundle 我們的 JavaScript。這個 bundle 檔案可以被複製並貼到其他的專案目錄中，放入 `<script>` 就可以使用。如果*只有 JavaScript*，而且你只在乎關於 webpack 基本的使用，你可以直接跳到[結論](#conclusion)。
+所以現在我們寫了一個設定檔讓我們可以 minify 和 bundle 我們的 JavaScript。這個 bundle 檔案可以被複製並貼到其他的專案目錄中，放入 `<script>` 就可以使用。如果你只需要瞭解怎麼用 webpack 處理 *只有 JavaScript* 的基本情況，你可以直接跳到[結論](#conclusion)。
 
 ## 一個更完整的範例
 
@@ -362,14 +362,14 @@ module.exports = {
 }
 ```
 
-我們一個一個複習這些屬性：
+我們一個一個查看這些新屬性：
 
 * [module](http://webpack.github.io/docs/configuration.html#module) - 設定你的檔案選項。
   * [loaders](http://webpack.github.io/docs/configuration.html#module-loaders) - 我們為應用程式所指定的一個 loader 陣列。
-    * test - 一個正規表達式來匹配 loader 的檔案。
-    * loaders - loader 用於這些匹配 test （正規表達式）的檔案。
+    * test - 一個正規表達式，用來找出要套用 loader 的檔案。
+    * loaders - 指定哪些 loader 是用於匹配前述 test （正規表達式）的檔案。
 
-這個時候你執行 `webpack`，如果你 `require` 的檔案結尾是 `.css`，然會我們會使用 `style` 和 `css` loader，將 CSS 加入到 bundle。
+這個時候你執行 `webpack`，如果你 `require` 的檔案結尾是 `.css`，我們會使用 `style` 和 `css` loader，將 CSS 加入到 bundle。
 
 如果我們沒有 loaders，我們會得到像是這樣的錯誤：
 
@@ -403,9 +403,9 @@ You may need an appropriate loader to handle this file type.
 
 [範例五](https://github.com/neighborhood999/WebpackTutorial/tree/master/zh-TW/part1/example5)
 
-現在我們的網站有一些基礎了，但我們還需要實際的網站樣式。
+現在我們的網站已經有了樣式的基本架構，我們還需要一個實際的頁面來套用這些樣式。
 
-我們通過 [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) 來做，它讓我們可以產生一個 HTML 頁面使用現有的。我們將使用一個目前現有的 `index.html`。
+我們透過 [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) 來做，它讓我們可以產生一個 HTML 頁面，或是使用現有的頁面。我們將使用一個目前現有的 `index.html`。
 
 首先我們需要安裝 plugin：
 
@@ -445,9 +445,9 @@ module.exports = {
 }
 ```
 
-這個時候當你執行 `webpack`，因為我們指定一個 `HtmlWebpackPlugin` 和 `./src/index.html` 的 template，它會產生一個檔案叫做 `index.html` 在我們的 `dist` 資料夾，而網頁的內容是 `./src/index.html`。
+這個時候當你執行 `webpack`，因為我們指定了一個搭配 `./src/index.html` template 的 `HtmlWebpackPlugin` ，它會產生一個檔案叫做 `index.html` 在我們的 `dist` 資料夾，而網頁的內容是 `./src/index.html`。
 
-如果 `index.html` 作為 template 是空的也沒用，現在是個好時機我們可以填入一些元素進去。
+`index.html` 作為 template 如果是空的就沒意義了，現在是個好時機我們可以填入一些元素進去。
 
 ```html
 <html>
@@ -492,14 +492,14 @@ button {
 
 [範例六](https://github.com/neighborhood999/WebpackTutorial/tree/master/zh-TW/part1/example6)
 
-現在我們想要實際在瀏覽器看到我們的網站，需要一個 web 伺服器來服務我們的程式碼。webpack 自帶了方便的 `webpack-dev-server`，你需要在本機和全域安裝。
+現在我們想要實際在瀏覽器看到我們的網站，這就需要一個 web 伺服器來跑我們的程式碼。webpack 自帶了方便的 `webpack-dev-server`，你需要在本機和全域安裝。
 
     npm install -g webpack-dev-server
     npm install --save-dev webpack-dev-server
 
 dev server 可以在瀏覽器看到你的網站外觀以及可以更快速的開發，是一個相當有用的資源。預設情況下你可以拜訪 `http://localhost:8080`。不幸的是，像是 hot reloading 的功能並不是內建的，還需要一些其他的設定。
 
-這是 webpack 設定檔一個很棒的分離點，意思是說你可以將他分成用於「development」以及「production」。因為我們必須在這個教學課程中保持簡單的方式，所不會有很大的改變，但是會介紹 webpack 很棒的可設置性。我們稱他們為 `webpack.config.dev.js` 和 `webpack.config.prod.js`。
+這裡是 webpack 設定檔一個很棒的分離點，你可以將它分成用於「development」以及用於「production」。因為我們在這個教學課程中將盡量保持簡單，所以兩個設定之間不會有非常大的不同，不過這是 webpack 極度可設置性的一個入門。我們將兩個設定檔命名為 `webpack.config.dev.js` 和 `webpack.config.prod.js`。
 
 ```javascript
 // webpack.config.dev.js
@@ -538,9 +538,9 @@ module.exports = {
 ```
 
 
-**修改**
+**改變**
 
-1. dev 設定檔省略了優化，當你不斷的 rebuild 時，他們是不必要的。所以不需要 `webpack.optimize` plugins。
+1. dev 設定檔省略了優化，因為當你不斷的 rebuild 時，它們是不必要的。所以拿掉了 `webpack.optimize` plugins。
 
 2. dev 設定檔需要對 dev server 做必要的設定，你可以到[這裡](https://webpack.github.io/docs/webpack-dev-server.html)了解更多。
 

From 7afb8afa8b01aa65fcd5e5ecf0e23f93fe014203 Mon Sep 17 00:00:00 2001
From: yucj <nakts0123@gmail.com>
Date: Mon, 9 Jan 2017 12:51:26 +0800
Subject: [PATCH 11/12] Update part2 translation

---
 zh-TW/part2/README.md | 45 +++++++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 23 deletions(-)

diff --git a/zh-TW/part2/README.md b/zh-TW/part2/README.md
index 3ca628f..546812b 100644
--- a/zh-TW/part2/README.md
+++ b/zh-TW/part2/README.md
@@ -32,7 +32,7 @@
 
 ## Babel
 
-如果你想要有更深入的說明，和更細微的設定 babel，請參考這個[手冊][1]。我在這裡了解了一些基本的設定。
+如果你想要有更深入的說明，和更細微的設定 babel，請參考這個[手冊][1]。我在這裡說明的是一些基本的設定。
 
 ### Babel 是做什麼用的？
 
@@ -70,23 +70,22 @@ var square = function square(n) {
 
 你只需要指定一個 `presets` 選項，下面是描述的摘錄：
 
-> JavaScript 也有一些提案需要 TC39（背後的 ECMAScript 標準為員會）的處理，才能將這些納入到標準中。
+> JavaScript 也有一些可能成為標準的提案，正在 TC39（ECMAScript 標準背後的委員會）的程序中。
 
 > 這個程序被分為 5 個 statge（0-4）。如果提案獲得更多的同意，通過各個 stage，就很容易被接受納入標準中，最後在 stage 4 中被接受納入標準。
 
 > 注意，這裡沒有 stage-4 的 preset，它只是作為的 `es2015` 的 preset。
 > 以上。
 
-總結以上，`presets` 是將 `plugin` bundle，然後將 feature 加入到你撰寫的程式碼。`es2015` 加入的 feature 肯定會在 ES6 的官方網站被釋出，presets 有 0-3 的 stage 提案，都是未來 JavaScript 的規範，只是現在還在草案階段。
-如果使用的 stage 越低，你使用的這些功能會有更高的風險被棄用。
+總結以上，`presets` 就是一些打包了 `plugins` 的 bundles，它們將一些功能加入到你在撰寫的程式碼。`es2015` 中的功能，肯定會出現在 ES6 的官方版本，而 stages 0-3 的 presets ，則是未來 JavaScript 規範的一些提案，現在還在草案階段。如果選擇的 stage 越低，你使用的 features 之後將不支援的風險越高。
 
-從我的經驗來說，我需要最低的是 `stage-2`，讓我可以使用叫做 [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread)。你可以在[這裡](https://github.com/tc39/ecma262)看看其他的提案，然後決定你要使用哪個 stage。
+從我的經驗來說，我至少需要 `stage-2`，讓我可以使用一個叫作 [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread) 的東西。你可以在[這裡](https://github.com/tc39/ecma262)看看其他的提案，然後決定你要使用哪個 stage。
 
 總之，如果要使用到這些 presets，我們需要安裝它們：
 
     npm install --save-dev babel-preset-es2015 babel-preset-stage-2
 
-而實際上這些你都需要。
+而實際上你全部需要做的事情就只有這個。
 
 ## Webpack
 
@@ -167,7 +166,7 @@ module.exports = {
 
 ### 一個新的 Loader
 
-如果要將我們的程式碼轉換成 ES5 需要透過執行新的 loader 叫做 `babel-loader`，它和 `babel-core` 有依賴關係。這個 loader 使用了我們的 `.babelrc` 設定檔來了解和轉換我們的程式碼。
+如果要將我們的程式碼轉換成 ES5，我們需要透過執行一個新的 loader 叫作 `babel-loader`，它和 `babel-core` 有依賴關係。這個 loader 使用了我們的 `.babelrc` 設定檔來了解和轉換我們的程式碼。
 
     npm install --save-dev babel-loader babel-core
 
@@ -189,17 +188,17 @@ module: {
 }
 ```
 
-一件**非常重要**的事情，請注意 `include` 屬性的用法。當我們執行 `webpack` 時，因為我們在 `test` 有設定 `/.js$/`，webpack 會在你的 dependency tree 每個單一的 `js` 檔案嘗試執行 babel loader。
+一件**非常重要**的事情，請注意 `include` 屬性的用法。當我們執行 `webpack` 時，因為我們在 `test` 有設定 `/.js$/`，webpack 會在你的 dependency tree 每一個 `js` 檔案嘗試執行 babel loader。
 
-你可以看出這個問題嗎？要是我 `require('bluebird')`，或是任何其他大型的 `npm` package？它會藉由 `babel-loader` 嘗試執行 **node_modules**，透過這樣的極端的方式，會延長你的 build 過程。
+你可以看出這有什麼問題嗎？要是我 `require('bluebird')`，或是任何其他大型的 `npm` package 會怎樣？它會藉由 `babel-loader` 嘗試執行整個 **node_modules**，這樣大量的執行會延長你的 build 過程。
 
-`include` 可以防止這個這個問題，loader 只適用在你所指定 `src` 目錄下的 `.js` 檔案。
+`include` 可以防止這個這個問題，loader 只會套用在你所指定 `src` 目錄下的 `.js` 檔案。
 
-另一個方式，你可以將 `include: path.join(__dirname, 'src')` 改變成 `exclude: /node_modules/`，除了 `node_modules` 目錄外其他都包括。更多資訊可以在[這裡](https://webpack.github.io/docs/configuration.html#module-loaders)找到。
+另一個方式是，你可以將 `include: path.join(__dirname, 'src')` 改變成 `exclude: /node_modules/`，這意思是除了 `node_modules` 目錄外其他都包括。更多資訊可以在[這裡](https://webpack.github.io/docs/configuration.html#module-loaders)找到。
 
 ## 我們完成了？
 
-老實說，我覺得這個教學過程有點太長了，看起來我似乎忘了加入 babel 實際上不是這麼的重要。我們現在可以使用 ES6 語法更新先前在 `index.js` 的程式碼：
+老實說，我以為這個教學會更長，但看起來我忘記了「加入 babel」這件事實際上非常簡單。現在我們可以使用 ES6 語法來更新先前 `index.js` 的程式碼了：
 
 ```javascript
 // index.js
@@ -235,17 +234,17 @@ import Please from 'pleasejs'
 
 ## 額外收穫
 
-由於實際上我並沒有這麼長的時間可以去涵蓋這兩個主題，但這些相當的重要和有用的。
+既然前面沒花太多時間，我將再討論兩個很重要且有用的主題。
 
-### Production 環境變數以及 Webpack 和 Babel
+### 在 Webpack 和 Babel 設定 production 環境變數
 
 #### Webpack
 
 如果我們不想要在 production 執行部分的程式碼，我們可以使用方便的 [DefinePlugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin)。
 
-這個 plugin 讓我們可以為我們整個 bundle 建立全域的常數，我們可以命名任何常數，像是：`DONT_USE_IN_PRODUCTION: true`，但是大多普遍的方式會是 `process.env.NODE_ENV: JSON.stringify('production')`，這會是更好的選擇。這是因為許多程式可以識別 `process.env.NODE_ENV`，並使用額外的功能和優化。
+這個 plugin 讓我們可以為我們整個 bundle 建立全域的常數，我們可以命名任何常數，像是：`DONT_USE_IN_PRODUCTION: true`，但是大多普遍的方式會是 `process.env.NODE_ENV: JSON.stringify('production')`，這會是更好的選擇。這是因為許多程式可以識別並根據 `process.env.NODE_ENV` 來使用額外的功能和優化你的程式碼。
 
-為什麼要 `JSON.stringify`？根據文件的解釋：
+為什麼要 `JSON.stringify`？因為根據文件的解釋：
 
 > 如果值是一個字串，它會被作為一個程式碼片段。
 
@@ -291,16 +290,16 @@ if (process.env.NODE_ENV !== 'production') {
 
 #### Babel
 
-定義我們的 production 變數 `process.env.NODE_ENV` 有其他額外的好處。
+將我們的 production 變數定義為 `process.env.NODE_ENV` 有其他額外的好處。
 
 [根據手冊][1]
 
-> 目前環境會使用 process.env.BABEL_ENV。當 BABEL_ENV 不可使用時，
-它會退回到 NODE_ENV，如果它是不可用的，預設將為「development」。
+> 「目前環境」是使用 process.env.BABEL_ENV。當找不到 BABEL_ENV 時，
+它會退回去找 NODE_ENV，如果也找不到 NODE_ENV，目前環境將設為預設值 "development"。
 
 這個意思說 babel 環境會 match 到我們的 webpack 環境。
 
-我們可以利用這一點，調整我們的 `.babelrc`，透過加入 `env` 讓我們有開發環境的設定：
+我們可以利用這一點，只要透過在我們的 `.babelrc` 加入 `env` 設定，就可以使用開發環境：
 
 ```javascript
 {
@@ -334,7 +333,7 @@ if (process.env.NODE_ENV !== 'production') {
 ```javascript
 // .eslintrc
 {
-  "extends": "airbnb/base" // 'airbnb/base' 因為 'airbnb' 假設使用 react
+  "extends": "airbnb/base" //使用 'airbnb/base' ，因為 'airbnb' 是假設使用 react
 }
 ```
 
@@ -404,11 +403,11 @@ if (process.env.NODE_ENV !== 'production') {
 
 所以現在我們可以輕鬆的撰寫 ES6 程式碼，此外，也讓我們了解到如何撰寫設定檔 :tada:！
 
-然而，你可以從頭到尾撰寫它，但你不一定要怎麼做。為了方便，[我有建立一個 repository](https://github.com/AriaFallah/minimal-babel-starter)，基於這個教學，你可以將它 clone 回來作為開始。
+然而，你有能力從頭開始撰寫它，並不表示你一定要這麼做。為了方便，[我有建立一個 repository](https://github.com/AriaFallah/minimal-babel-starter) 讓你 clone 下來開始，這是根據這份教學建立的基本檔案。
 
 對未來的期望：
 
-* Part 3 將會加入 React 到圖片中
+* Part 3 將會加入 React
 * Part 4 將會涵蓋更多進階的 webpack 功能
 
 感謝你的閱讀！

From acd0c8eba6bd21787277aacee22fb2ec73162560 Mon Sep 17 00:00:00 2001
From: Peng Jie <dean.leehom@gmail.com>
Date: Mon, 29 Jan 2018 21:11:52 +0800
Subject: [PATCH 12/12] Update README.md

---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index aa8ffb1..cc1f469 100644
--- a/README.md
+++ b/README.md
@@ -8,3 +8,7 @@ intro to webpack.
 
 ### Translations
 - [Chinese Traditional](https://github.com/AriaFallah/WebpackTutorial/tree/master/zh-TW)
+
+### Gitbook
+
+- [Webpack Tutoiral Gitbook 繁體中文](https://github.com/neighborhood999/webpack-tutorial-gitbook)