fix conflict and table of content link

neighborhood999 · neighborhood999 · commit 38cc26d3ab35 · 2016-05-05T21:33:58.000+08:00
diff --git a/part1/README.md b/part1/README.md
@@ -30,7 +30,6 @@ make a pull request.
   * [Bundling](#bundling)
   * [Loaders](#loaders)
   * [Plugins](#plugins)
-<<<<<<< HEAD
 * [Your Config File](#your-config-file)
   * [A Minimal Example](#a-minimal-example)
   * [Introducing Plugins](#introducing-plugins)
@@ -41,18 +40,6 @@ make a pull request.
   * [Start Coding](#start-coding)
 * [Conclusion](#conclusion)
 * [Closing Thoughts](#closing-thoughts)
-=======
-* [你的設定檔案](#your-config-file)
-  * [一個簡單的範例](#a-minimal-example)
-  * [介紹 Plugins](#introducing-plugins)
-* [一個更完整的範例](#a-more-complete-example)
-  * [介紹 Loaders](#introducing-loaders)
-  * [加入更多 Plugins](#adding-more-plugins)
-  * [開發伺服器](#the-development-server)
-  * [開始撰寫程式](#start-coding)
-* [結論](#conclusion)
-* [結束後的思考](#closing-thoughts)
->>>>>>> bd62391... translate ex5 ex6
 
 ## Why Webpack?
 
@@ -367,17 +354,10 @@ MyDirectory
 
 #### Contents
 
-<<<<<<< HEAD
 1. [Introducing Loaders](#introducing-loaders) - We will add loaders, which allow us to add CSS to our bundle.
 2. [Adding More Plugins](#adding-more-plugins) - We will add a plugin that'll help us create/use an HTML file.
 3. [The Development Server](#the-development-server) - We'll split our webpack config into separate `development` and `production` files. Then use the webpack-dev-server to view our website and enable HMR.
 4. [Start Coding](#start-coding) - We will actually write some JavaScript.
-=======
-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。
->>>>>>> bd62391... translate ex5 ex6
 
 #### Introducing Loaders
 
@@ -551,18 +531,23 @@ button {
 }
 ```
 
-#### 開發伺服器
+#### The Development Server
 
-[範例六](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example6)
+[Example 6](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example6)
 
-現在我們想要實際在瀏覽器看到我們的網站，需要一個 web 伺服器來服務我們的程式碼。webpack 自帶了方便的 `webpack-dev-server`，你需要在本機和全域安裝。
+Now we want to actually see our website in the browser, which requires a web server to serve our
+code. Conveniently, webpack comes with the `webpack-dev-server`, which you need to install both
+locally and globally
 
     npm install -g webpack-dev-server
     npm install --save-dev webpack-dev-server
 
-dev server 可以在瀏覽器看到你的網站是怎麼樣子以及可以更快速的開發，是一個相當有用的資源。預設情況下你可以拜訪 `http://localhost:8080`。不幸的是，像是 hot reloading 的功能並不是內建的，還需要一些其他的設定。
+The dev server is an extremely useful resource for seeing what your website looks like in the browser, and more rapid development. By default you can visit it at `http://localhost:8080`. Unfortunately, features such as hot reloading don't work out of the box, and require some more configuration.
 
-這是 webpack 設定檔一個很棒的分離點，意思是說你可以將他分成用於「development」以及「production」。因為我們必須在這個教學中保持簡單的方式，所不會有很大的改變，但是會介紹 webpack 很棒的可設置性。我們稱他們為 `webpack.config.dev.js` 和 `webpack.config.prod.js`。
+This is a good point to split up our webpack config into one meant for development and one meant for
+production. Since we're keeping it simple in this tutorial, it won't be a huge difference, but it's
+an introduction to the extreme configurability of webpack. We'll call them `webpack.config.dev.js`
+and `webpack.config.prod.js`.
 
 ```javascript
 // webpack.config.dev.js
@@ -601,20 +586,22 @@ module.exports = {
 ```
 
 
-**修改**
+**Changes**
 
-1. dev 設定檔省略了優化，當你不斷的 rebuild 時，他們不是必要的。所以不需要 `webpack.optimize` plugins。
+1. The dev config omits the optimizations as they are unnecessary overhead when you are constantly
+rebuilding. So no `webpack.optimize` plugins.
 
-2. dev 設定檔需要對 dev server 做必要的設定，你可以到[這裡](https://webpack.github.io/docs/webpack-dev-server.html)了解更多。
+2. The dev config has the necessary configuration for the dev server, which you can read more about
+[here](https://webpack.github.io/docs/webpack-dev-server.html).
 
-總結：
+Summarized:
 
-* entry: 兩個新的進入點將伺服器連結到瀏覽器，方便 HMR。
+* entry: The two new entry points connect the server to the browser to allow for HMR.
 * devServer
-  * contentBase: 服務的檔案來自哪裡。
-  * hot: 啟用 HMR。
+  * contentBase: Where to serve files from
+  * hot: enable HMR
 
-prod 設定檔不需要改變太多：
+The prod config doesn't change much
 
 ```javascript
 // webpack.config.prod.js
@@ -649,22 +636,28 @@ module.exports = {
 }
 ```
 
-我也加入一個全新的屬性在 dev 和 prod 設定檔：
+I've also added a brand new property to both the dev config and the prod config:
 
-* [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) - This is a debugging aid.
+Basically, when you get a error, it'll help you see where you made the mistake something like the
+chrome developer console. As for the difference between `source-map` and `cheap-eval-source-map`
+it's a little hard to glean from the docs. What I can say definitively is that `source-map` is meant
+for production and has a lot of overhead, and that `cheap-eval-source-map` has less overhead and is
+meant for developing only.
 
-如果要執行 dev server，我們可以執行：
+To run the dev server we have to run
 
     webpack-dev-server --config webpack.config.dev.js
 
-如果我們要 build production 的程式碼，我們可以執行：
+and to build the production code we have to run
 
     webpack --config webpack.config.prod.js
 
 
-如果想要讓這些指令使用的更容易，我們可以到 `package.json` 來設定簡單的 script。
+To make our lives a little easier we are now going to use `package.json` as a simple task runner so
+that we don't need to keep typing out either command.
 
-我們加入 `scripts` 屬性到設定檔：
+We add the `scripts` property to the config
 
 ```javascript
 // package.json
@@ -678,20 +671,25 @@ module.exports = {
 }
 ```
 
-我們可以執行這些指令：
+We can run these commands with
 
 ```
 npm run build
 npm run dev
 ```
 
-你現在可以透過 `npm run dev`，並導到 `http://localhost:8080` 看到你的網站。
+You can now view your beautiful website by running `npm run dev`, and navigating to
+`http://localhost:8080`.
 
-**備註：** 當我正在測試這個部份時，我明白到當我修改 `index.html` 檔案時，伺服器不能 hot reload。 解決這個問題的方法在 [html-reload](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/html-reload)。這裡涵蓋了一些 webpack 設定檔選項的有用資訊，我推薦你可以看一下，但是我把它分開了，因為我覺得會因為這個不太重要的原因，這會延長這個教學。
+**Side Note:** while I was testing this portion I realized that the server would not hot reload
+when I modified the `index.html` file. The solution to this problem is over at
+[html-reload](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/html-reload). It's useful
+information that covers some more configuration options of webpack, which I recommend looking at,
+but I left it separate because I feel like it lengthens the tutorial for too trivial of a reason.
 
-#### 開始撰寫程式
+#### Start Coding
 
-[範例七](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example7)
+[Example 7](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example7)
 
 The reason most people seem to be flustered by webpack is the fact that they need to go through all
 of this to get to the point where they finally write JavaScript; however, now we have arrived at the
diff --git a/part1/example5/README.md b/part1/example5/README.md
@@ -118,8 +118,4 @@ new HtmlWebpackPlugin({
 })
 ```
 
-<<<<<<< HEAD
 Anyone with other experience feel free to correct me if I'm wrong.
-=======
-如果我錯了，請任何有這方面經驗的人隨時糾正我。
->>>>>>> bd62391... translate ex5 ex6
diff --git a/part1/example6/README.md b/part1/example6/README.md
@@ -1,13 +1,18 @@
-# 範例六 - 開發伺服器
+# Example 6 - The Development Server
 
-現在我們想要實際在瀏覽器看到我們的網站，需要一個 web 伺服器來服務我們的程式碼。webpack 自帶了方便的 `webpack-dev-server`，你需要在本機和全域安裝。
+Now we want to actually see our website in the browser, which requires a web server to serve our
+code. Conveniently, webpack comes with the `webpack-dev-server`, which you need to install both
+locally and globally
 
     npm install -g webpack-dev-server
     npm install --save-dev webpack-dev-server
 
-dev server 可以在瀏覽器看到你的網站是怎麼樣子以及可以更快速的開發，是一個相當有用的資源。預設情況下你可以拜訪 `http://localhost:8080`。不幸的是，像是 hot reloading 的功能並不是內建的，還需要一些其他的設定。
+The dev server is an extremely useful resource for seeing what your website looks like in the browser, and more rapid development. By default you can visit it at `http://localhost:8080`. Unfortunately, features such as hot reloading don't work out of the box, and require some more configuration.
 
-這是 webpack 設定檔一個很棒的分離點，意思是說你可以將他分成用於「development」以及「production」。因為我們必須在這個教學中保持簡單的方式，所不會有很大的改變，但是會介紹 webpack 很棒的可設置性。我們稱他們為 `webpack.config.dev.js` 和 `webpack.config.prod.js`。
+This is a good point to split up our webpack config into one meant for development and one meant for
+production. Since we're keeping it simple in this tutorial, it won't be a huge difference, but it's
+an introduction to the extreme configurability of webpack. We'll call them `webpack.config.dev.js`
+and `webpack.config.prod.js`.
 
 ```javascript
 // webpack.config.dev.js
@@ -46,21 +51,23 @@ module.exports = {
 ```
 
 
-**修改**
+**Changes**
 
-1. dev 設定檔省略了優化，當你不斷的 rebuild 時，他們不是必要的。所以不需要 `webpack.optimize` plugins。
+1. The dev config omits the optimizations as they are unnecessary overhead when you are constantly
+rebuilding. So no `webpack.optimize` plugins.
 
-2. dev 設定檔需要對 dev server 做必要的設定，你可以到[這裡](https://webpack.github.io/docs/webpack-dev-server.html)了解更多。
+2. The dev config has the necessary configuration for the dev server, which you can read more about
+[here](https://webpack.github.io/docs/webpack-dev-server.html).
 
-總結：
+Summarized:
 
-* entry: 兩個新的進入點將伺服器連結到瀏覽器，方便 HMR。
+* entry: The two new entry points connect the server to the browser to allow for HMR.
 * devServer
-  * contentBase: 服務的檔案來自哪裡。
-  * hot: 啟用 HMR。
+  * contentBase: Where to serve files from
+  * hot: enable HMR
 ---
 
-prod 設定檔不需要改變太多：
+The prod config doesn't change much
 
 ```javascript
 // webpack.config.prod.js
@@ -95,22 +102,28 @@ module.exports = {
 }
 ```
 
-我也加入一個全新的屬性在 dev 和 prod 設定檔：
+I've also added a brand new property to both the dev config and the prod config:
 
-* [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) - This is a debugging aid.
+Basically, when you get a error, it'll help you see where you made the mistake something like the
+chrome developer console. As for the difference between `source-map` and `cheap-eval-source-map`
+it's a little hard to glean from the docs. What I can say definitively is that `source-map` is meant
+for production and has a lot of overhead, and that `cheap-eval-source-map` has less overhead and is
+meant for developing only.
 
-如果要執行 dev server，我們可以執行：
+To run the dev server we have to run
 
     webpack-dev-server --config webpack.config.dev.js
 
-如果我們要 build production 的程式碼，我們可以執
+and to build the production code we have to run
 
     webpack --config webpack.config.prod.js
 
 
-如果想要讓這些指令使用的更容易，我們可以到 `package.json` 來設定簡單的 script。
+To make our lives a little easier we are now going to use `package.json` as a simple task runner so
+that we don't need to keep typing out either command.
 
-我們加入 `scripts` 屬性到設定檔：
+We add them `scripts` property of the config
 
 ```javascript
 // package.json
@@ -124,13 +137,18 @@ module.exports = {
 }
 ```
 
-我們可以執行這些指令：
+We can run these commands with
 
 ```
 npm run build
 npm run dev
 ```
 
-你現在可以透過 `npm run dev`，並導到 `http://localhost:8080` 看到你的網站。
+You can now view your beautiful website by running `npm run dev`, and navigating to
+`http://localhost:8080`.
 
-**備註：** 當我正在測試這個部份時，我明白到當我修改 `index.html` 檔案時，伺服器不能 hot reload。 解決這個問題的方法在 [html-reload](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/html-reload)。這裡涵蓋了一些 webpack 設定檔選項的有用資訊，我推薦你可以看一下，但是我把它分開了，因為我覺得會因為這個不太重要的原因，這會延長這個教學。
+**Side Note:** while I was testing this portion I realized that the server would not hot reload
+when I modified the `index.html` file. The solution to this problem is over at
+[extra](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/html-reload). It's useful
+information that covers some more configuration options of webpack, which I recommend looking at,
+but I left it separate because I feel like it lengthens the tutorial for too trivial of a reason.
diff --git a/zh-TW/part1/README.md b/zh-TW/part1/README.md
@@ -20,22 +20,22 @@
 
 ## 目錄
 
-* [為什麼要 Webpack？](#why-webpack)
-* [基礎](#the-basics)
-  * [安裝](#installation)
+* [為什麼要 Webpack？](#為什麼要-webpack)
+* [基礎](#基礎)
+  * [安裝](#安裝)
   * [Bundling](#bundling)
   * [Loaders](#loaders)
   * [Plugins](#plugins)
-* [你的設定檔案](#your-config-file)
-  * [一個簡單的範例](#a-minimal-example)
-  * [介紹 Plugins](#introducing-plugins)
-* [一個更完整的範例](#a-more-complete-example)
-  * [介紹 Loaders](#introducing-loaders)
-  * [加入更多 Plugins](#adding-more-plugins)
-  * [開發伺服器](#the-development-server)
-  * [開始撰寫程式](#start-coding)
-* [結論](#conclusion)
-* [反思](#closing-thoughts)
+* [你的設定檔案](#你的設定檔案)
+  * [一個簡單的範例](#一個簡單的範例)
+  * [介紹 Plugins](#介紹-plugins)
+* [一個更完整的範例](#一個更完整的範例)
+  * [介紹 Loaders](#介紹-loaders)
+  * [加入更多的 Plugins](#加入更多的-plugins)
+  * [開發伺服器](#開發伺服器)
+  * [開始撰寫程式](#開始撰寫程式)
+* [結論](#結論)
+* [反思](#反思)
 
 ## 為什麼要 Webpack？
 
@@ -399,7 +399,7 @@ You may need an appropriate loader to handle this file type.
 
 要知道這些需要被指定的 loader 是有*順序*的，這是一個很重要部分。在上面的範例，`sass` loader 是第一個應用在你的 `.scss` 檔案，然後是 `css` loader，最後是 `style` loader。你可以看到，這些 loader 的應用模式是由右到左。
 
-#### 加入更多的 Plugin
+#### 加入更多的 Plugins
 
 [範例五](https://github.com/neighborhood999/WebpackTutorial/tree/master/zh-TW/part1/example5)
 
diff --git a/zh-TW/part2/README.md b/zh-TW/part2/README.md
@@ -18,16 +18,16 @@
 ## 目錄
 
 * [Babel](#babel)
-  * [Babel 是做什麼用的？](#what-does-babel-do)
-  * [設定 Babel](#configuring-babel)
+  * [Babel 是做什麼用的？](#babel-是做什麼用的)
+  * [設定 Babel](#設定-babel)
 * [Webpack](#webpack)
-  * [一個新的 Loader](#a-new-loader)
-* [我們完成了？](#we-are-done)
-  * [Require ES6 的 Module](#requiring-with-es6-modules)
-* [額外收穫](#extra-credit)
-  * [Production 環境變數以及 Webpack 和 Babel](#production-environment-variables-with-webpack-and-babel)
-  * [加入 Lint](#adding-linting)
-* [結論](#conclusion)
+  * [一個新的 Loader](#一個新的-loader)
+* [我們完成了？](#我們完成了)
+  * [Require ES6 的 Module](#require-es6-的-module)
+* [額外收穫](#額外收穫)
+  * [Production 環境變數以及 Webpack 和 Babel](#production-環境變數以及-webpack-和-babel)
+  * [加入 Lint](#加入-lint)
+* [結論](#結論)
 
 
 ## Babel
@@ -197,7 +197,7 @@ module: {
 
 另一個方式，你可以將 `include: path.join(__dirname, 'src')` 改變成 `exclude: /node_modules/`，除了 `node_modules` 目錄外其他都包括。更多資訊可以在[這裡](https://webpack.github.io/docs/configuration.html#module-loaders)找到。
 
-## 我們完成了嗎？
+## 我們完成了？
 
 老實說，我覺得這個教學過程有點太長了，看起來我似乎忘了加入 babel 實際上不是這麼的重要。我們現在可以使用 ES6 語法更新先前在 `index.js` 的程式碼：
 
