From 22cc2e06ce83664e0f86d1cb8c734a3bb113778d Mon Sep 17 00:00:00 2001
From: Peng-Jie <dean.leehom@gmail.com>
Date: Mon, 2 May 2016 10:03:30 +0800
Subject: [PATCH 1/5] translate README and part1: example1-example5

---
 README.md                |   9 +-
 part1/README.md          | 305 +++++++++++++++++----------------------
 part1/example1/README.md |  41 +++---
 part1/example2/README.md |  18 +--
 part1/example3/README.md |  31 ++--
 part1/example4/README.md |  31 ++--
 part1/example5/README.md |  39 ++---
 7 files changed, 205 insertions(+), 269 deletions(-)

diff --git a/README.md b/README.md
index 4f2b460..0a58392 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,6 @@
-# Beginner Webpack Tutorial :school:
+# Webpack 初學者教學 :school:
 
-Starting off with webpack was hard for me. I want to create a beginner friendly and comprehensive
-intro to webpack.
+Webpack 剛開始對我來說是很困難的。我想要建立一個對初學者友善，而且對 webpack 有非常全面的介紹。
 
-- [Part 1](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1) - Webpack Basics and configuration.
-- [Part 2](https://github.com/AriaFallah/WebpackTutorial/tree/master/part2) - Babel, linting, and environment variables.
+- [Part 1](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1) - Webpack 基礎和設定。
+- [Part 2](https://github.com/AriaFallah/WebpackTutorial/tree/master/part2) - Babel、Lint、以及環境變數。
diff --git a/part1/README.md b/part1/README.md
index 0ac096b..d60fea1 100644
--- a/part1/README.md
+++ b/part1/README.md
@@ -1,133 +1,119 @@
-# Beginner Webpack Tutorial Part 1 - Introduction To Webpack :zap:
+# Webpack 初學者教學 Part 1 - Webpack 簡介 :zap:
 
-This is for the people like me whose first intro to webpack was a repository similar to:
+對於像我這樣的人來說，第一次接觸到 webpack 是像是這些 repository：
 
 * https://github.com/davezuko/react-redux-starter-kit
 * https://github.com/webpack/react-starter
 
-While these repositories are very well put together, they aren't necessarily the best learning tools.
-In my case, I got pretty confused trying to understand what was going on, and scrapped together my
-understanding from a lot of scattered resources.
+雖然這些 repository 放在一起很棒，但它們不一定是最好的學習工具。
+像我的情況，我試著了解發生了那些事情，但還是很困惑，所以我決定不從這些大量而且分散的資源來理解。
 
-I hope that this tutorial can make Webpack easy to learn.
+我希望這個教學可以讓 webpack 更容易的學習。
 
-## Requirements
+## 需求
 
-At the very least you are expected to know the basics of node.js and npm.
+至少，希望你了解基本的 node.js 和 npm。
 
-## Contributing
+## 貢獻
 
-I will gladly accept any and all contributions/corrections. If you have any questions,
-feel free to leave them as issues. If I made mistakes, please point them out. Finally, if you feel
-that I left anything out, or could have explained something better make sure to leave an issue or
-make a pull request.
+我很樂意接受任何所有的貢獻或是修正。如果你有任何問題，
+可以將這些問題發成 issue。如果我有錯誤的話，請將問題指出。最後，如果你覺得我漏了些什麼，或者可以將某些部分解釋的更好，留下一個 issue 或者是發送 Pull Request。
 
-## Table of Contents
+## 內容列表
 
-* [Why Webpack?](#why-webpack)
-* [The Basics](#the-basics)
-  * [Installation](#installation)
+* [為什麼要 Webpack？](#why-webpack)
+* [基礎](#the-basics)
+  * [安裝](#installation)
   * [Bundling](#bundling)
   * [Loaders](#loaders)
   * [Plugins](#plugins)
-* [Your Config File](#your-config-file)
-  * [A Minimal Example](#a-minimal-example)
-  * [Introducing Plugins](#introducing-plugins)
-* [A More Complete Example](#a-more-complete-example)
-  * [Introducing Loaders](#introducing-loaders)
-  * [Adding More Plugins](#adding-more-plugins)
+* [你的設定檔案](#your-config-file)
+  * [一個簡單的範例](#a-minimal-example)
+  * [介紹 Plugins](#introducing-plugins)
+* [一個更完整的範例](#a-more-complete-example)
+  * [介紹 Loaders](#introducing-loaders)
+  * [加入更多 Plugins](#adding-more-plugins)
   * [The Development Server](#the-development-server)
   * [Start Coding](#start-coding)
-* [Conclusion](#conclusion)
-* [Closing Thoughts](#closing-thoughts)
+* [結論](#conclusion)
+* [結束後的思考](#closing-thoughts)
 
-## Why Webpack?
+## 為什麼要 Webpack？
 
-Because every single react/redux tutorial assumes you know it :cry:
+因為每個 react 或 redux 教學都假設你知道什麼是 webpack。:cry:
 
-More realistically here are some reasons you would want to use webpack.
+以下這些是更現實的原因，你可能需要使用 webpack。
 
-Lets you:
-  * Bundle your js files into a single file
-  * Use npm packages in your frontend code
-  * Write ES6/ES7 JavaScript (with help from babel)
-  * Minify/Optimize code
-  * Turn LESS/SCSS into CSS
-  * Use HMR (Hot Module Replacement)
-  * Include any type of file into your JavaScript
-  * A lot more advanced stuff, which I won't cover
+你可以：
+  * Bundle 你的 js 檔案變成單一的檔案
+  * 在你的前端程式碼中使用 npm packages
+  * 撰寫 JavaScript ES6 或 ES7（需要透過 babel 來幫助）
+  * Minify 或優化程式碼
+  * 將 LESS 或 SCSS 轉換成 CSS
+  * 使用 HMR（Hot Module Replacement）
+  * 包含任何類型的檔案到你的 JavaScript
+  * 更多進階的東西，暫時不介紹
 
-##### Why do I want these features?
+##### 為什麼我需要這些功能？
 
-* Bundle JS files - Lets you write modular JavaScript, but you do not need to include a separate
-`<script>` tag for each JS file. (Configurable in case you do need more than one js file)
+* Bundle JS 檔案 - 讓你可以撰寫模組化的 JavaScript，但是你不需要 inclue 每個 JavaScript `<script>` 的檔案（如果你需要多個 JavaScript 檔案可以透過設定來完成）。
 
-* Use npm packages in your frontend code - npm is the biggest ecosystem of open source code on the
-internet. Chances are you can save writing code by taking a look at npm, and including the packages
-you want in your frontend.
+* 在你的前端程式碼中使用 npm packages - npm 在 internet 上是一個大型的 open source 生態系統。有機會你可以儲存你的程式碼，然後到 npm 看一看，可能包含你想要的前端套件。
 
-* ES6/ES7 - Adds lots of features to JavaScript that makes it more powerful and easier to write.
-[Look here for an intro](https://github.com/DrkSephy/es6-cheatsheet).
+* ES6 和 ES7 - 加入一些 JavaScript 的新功能，讓撰寫程式碼可以更強大更容易，[請看這裡的介紹](https://github.com/DrkSephy/es6-cheatsheet)。
 
-* Minify/Optimize Code - Reduces the size of file that you're distributing. Benefits include things
-like faster page loads.
+* Minify 或優化程式碼 - 減少你所分配的檔案大小，好處包括像是更快的將頁面載入。
 
-* Turn LESS/SCSS into CSS - Nicer way to write CSS.
-[Here's an intro if you're unfamiliar](http://alistapart.com/article/why-sass).
+* 將 LESS 或 SCSS 轉換成 CSS - 更好的方式來撰寫 CSS，
+[如果你不熟悉的話，這裡有一些介紹](http://alistapart.com/article/why-sass)。
 
-* Use HMR - A boost to productivity. Every time you save your code, it gets injected into the page
-without requiring a full page refresh. This is really handy if you need to maintain the state of the
-page while you are editing your code.
+* 使用 HMR - 增加生產力。每當你儲存程式碼的時候，它可以注入到網頁，而不需將網頁刷新。如果當編輯你的程式碼，你需要維護頁面的狀態，這是非常方便的。
 
-* Include any type of file into your JavaScript - Reduces need for other build tools, and allows you
-to programmatically modify/use those files.
+* 包含任何類型的檔案到你的 JavaScript - 減少對其他 build 工具的需要，必讓你可以透過程式的方式修改或使用這些檔案。
 
-## The Basics
+## 基礎
 
-### Installation
+### 安裝
 
-To use most of the features of webpack you only need a global installation:
+你需要全域安裝來使用 webpack 大部分的功能：
 
     npm install -g webpack
 
-However some features of webpack, such as optimization plugins, require you to have it installed
-locally. In which case you'll need to:
+然而 webpack 有些功能，像是優化的 plugins，需要你將它安裝在本機。想這種情況下你需要：
 
     npm install --save-dev webpack
 
-### The Command Line
+### 命令列
 
-To run webpack:
+如果要執行 webpack：
 
     webpack
 
-If you want webpack to build every time you change a file:
+如果你想要在 webpack 每次 build 的時候查看改變的檔案：
 
     webpack --watch
 
-If you want to use a config file with webpack with a custom name:
+如果你想要使用自訂的 webpack 設定檔：
 
     webpack --config myconfig.js
 
 ### Bundling
 
-[Example 1](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example1)
+[範例一](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example1)
 
 ![Official Dependency Tree](http://i.imgur.com/YU4xBPQ.png)
 
-Webpack is formally referred to as a module bundler. If you want an in-depth and accessible explanation
-on modules and module bundling definitely check out these two great articles:
-[here](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.jw1txw6uh)
-and [here](https://medium.com/@preethikasireddy/javascript-modules-part-2-module-bundling-5020383cf306#.lfnspler2).
-We're gonna keep it simple. The way that it works is that you specify a single file as your entry point.
-This file will be the root of your tree. Then every time you `require` a file from another file it's
-added to the tree. When you run `webpack`, all these files/modules are bundled into a single file.
+Webpack 簡稱為模組的整合工具。如果你想要深入的話，可以拜訪「modules」和「module bundling definitely」這兩篇優秀的解釋文章：
+[JavaScript Modules: A Beginner’s Guide](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.jw1txw6uh)
+和 [JavaScript Modules Part 2: Module Bundling](https://medium.com/@preethikasireddy/javascript-modules-part-2-module-bundling-5020383cf306#.lfnspler2)。
+我們要保持它的簡單，webpack 運作的方式是透過指定一個單一檔案作為你的進入點。
+這個檔案會是 tree 的 root。然後你每次 `require` 一個檔案從其他檔案並把它加入到 tree。當你執行 `webpack`，所有的檔案和 module 都會被 bundle 成一個檔案。
 
-Here's a simple example:
+這裡是一個簡單的範例：
 
 ![Dependency Tree](http://i.imgur.com/dSghwwL.png)
 
-Given this picture you could have the directory:
+根據這樣的情況，你可以有這樣的目錄：
 
 ```
 MyDirectory
@@ -138,7 +124,7 @@ MyDirectory
 |- extraFile.js
 ```
 
-and this could be the content of your files
+這些可能是你檔案的內容：
 
 ```javascript
 // index.js
@@ -164,10 +150,9 @@ body {
 }
 ```
 
-When you run `webpack`, you'll get a bundle with the contents of this tree, but `extraFile.js`,
-which was in the same directory, will not be part of the bundle because it was never `required`.
+當你執行 `webpack`，你會得到一個這個 tree 的 bundle 內容，雖然 `extraFile.js` 也是在相同的目錄中，但它不是被 bundle 的一部份，因為它在 `index.js` 沒有被 `require`。
 
-`bundle.js` will look like:
+`bundle.js` 看起來會像：
 
 ```javascript
 // contents of styles.css
@@ -175,50 +160,43 @@ which was in the same directory, will not be part of the bundle because it was n
 // contents of APIStuff.js + fetch
 ```
 
-The things that are bundled are only the things that you explicitly required across your files.
+被 bundle 的這些檔案是你明確所 require 進來的檔案。
 
 ### Loaders
 
-As you probably noticed, I did something strange in the above example. I `required` a css file in
-a JavaScript file.
+你可能會注意到，我在上方的範例做了一些奇怪的事情。我在 JavaScript 檔案中 `require` 一個 css 檔案。
 
-The really cool, and interesting thing about webpack is that you can `require` more than just
-JavaScript files.
+關於 webpack 真的很酷，有趣的事情是，你可以 `require` 更多不只是 JavaScript 的檔案。
 
-There is this thing in webpack called a loader. Using these loaders, you can
-`require` anything from `.css` and `.html` to `.png` files.
+在 webpack 這些東西我們稱為 loader。使用這些 loader，你可以 `require` 任何 `.css` 和 `.html`  到 `.png` 檔。
 
-For example in the diagram above I had
+例如在上圖我有：
 
 ```javascript
 // index.js
 require('./styles.css')
 ```
 
-If I include [the style-loader](https://github.com/webpack/style-loader) and the [the css-loader](https://github.com/webpack/css-loader) in my webpack config, this is not only perfectly
-valid, but also will actually apply the CSS to my page.
+如果我在我的 webpack 設定檔中，引入 [style-loader](https://github.com/webpack/style-loader) 和 [css-loader](https://github.com/webpack/css-loader)，這不是完全有效的，但是實際上還是會應用 CSS 到我的網頁。
 
-This is just a single example of the many loaders you can use with webpack.
+你可以在 webpack 使用多個 loader，這裡只是一個單一的例子。
 
 ### Plugins
 
-Plugins, like the name suggests, add extra functionality to webpack. One frequently used plugin is
-the `UglifyJsPlugin`, which lets you minify your JavaScript code. We'll cover how to use this later.
+Plugin，顧名思義就是為 webpack 增加額外的功能。其中常使用到的一個 plugin 是 `UglifyJsPlugin`，它可以 minify 你的 JavaScript 程式碼。我們之後會介紹如何使用。
 
-## Your Config File
+## 你的 webpack 設定檔案
 
-Webpack does not work out of the box so you need to tailor it to your needs. In order to do this you
-need to create a file called
+Webpack 沒辦法直接使用，需要透過你的需求來做設定。為了做到這一點，你需要建立一個檔案叫做：
 
     webpack.config.js
 
-as this is the name that webpack recognizes by default. If you choose to use a different name you
-would have to use the `--config` flag to specify the file's name.
+預設情況下，webpack 會去識別這個檔名。如果你選擇使用不同的檔名，你需要加入 `--config` 來指定你的檔案名稱。
 
-### A Minimal Example
-[Example 2](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example2)
+### 一個簡單的範例
+[範例二](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example2)
 
-Say your directory structure looks like this:
+你的目錄結構像是這樣：
 
 ```
 MyDirectory
@@ -229,14 +207,14 @@ MyDirectory
 
 ```
 
-Then a very minimal webpack config you can make is this
+然後這是一個非常簡易的 webpack 設定：
 
 ```javascript
 // webpack.config.js
 var path = require('path')
 
 module.exports = {
-  entry: ['./src/index'], // file extension after index is optional for .js files
+  entry: ['./src/index'], // 在 index 檔案後的 .js 副檔名是可選的
   output: {
     path: path.join(__dirname, 'dist'),
     filename: 'bundle.js'
@@ -244,32 +222,27 @@ module.exports = {
 }
 ```
 
-Going over the new properties one by one:
+我們一個一個複習這些屬性：
 
-* [entry](https://webpack.github.io/docs/configuration.html#entry) - The entrypoint of your bundle,
-which we discussed in the [bundling](#bundling) section. It's an array because webpack allows
-multiple entry points if you want to generate multiple bundles.
+* [entry](https://webpack.github.io/docs/configuration.html#entry) - 這是你的 bundle 的進入點，這是我們在討論 [bundling](#bundling) 的部分。`entry` 是一個陣列，根據你的需求，webpack 允許可以有多個進入點，來產生多個 bundle 檔案。
 
-* [output](https://webpack.github.io/docs/configuration.html#output) - Dictates the form of the output by webpack
-  * [path](https://webpack.github.io/docs/configuration.html#output-path) - where to put the bundle
-  * [filename](https://webpack.github.io/docs/configuration.html#output-filename) - what to call the 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 檔案名稱
 
-When you run `webpack`, this will create a file called `bundle.js` in the dist folder.
+當你執行 `webpack`，會在你的 dist 資料夾建立一個叫做 `bundle.js` 的檔案。
 
-### Introducing Plugins
+### 介紹 Plugins
 
-[Example 3](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example3)
+[範例三](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example3)
 
-Imagine that you've used webpack to bundle all your files together, and now you've realized that all
-together it's 900KB. This is a problem that can be ameliorated by minifying your bundle. To do this
-you need to use a plugin I mentioned earlier called the
-[UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin).
+想像一下，你使用 webpack 將你的檔案 bundle 在一起，然後你意識到 bundle 後的結果是 900KB。這裡有個問題，但是你可以透過 minify 你的 bundle 檔案來做改善。如果需要做到這一點，你需要使用一個我在前面稍早提到的 [UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) plugin。
 
-Moreover you will need to have webpack installed locally to actually be able to use the plugin.
+此外，你需要在本機安裝 webpack 才能實際的去使用這個 plugin。
 
     npm install --save-dev webpack
 
-Now you can require webpack and minify your code.
+現在你可以 require webpack 並 minify 你的程式碼。
 
 ```javascript
 // webpack.config.js
@@ -292,19 +265,18 @@ module.exports = {
   ]
 }
 ```
-Going over the new properties one by one:
+我們一個一個複習這些屬性：
 
-* plugins - An array that holds your plugins.
-  * [webpack.optimize.UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) - Minify your code, and suppress warning messages.
+* plugins - 一個可以儲存你的 plugin 的陣列。
+  * [webpack.optimize.UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) - Minify 你的程式碼，並顯示警告訊息。
 
-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.
+這個時候，當我們執行 `webpack`，`UglifyJsPlugin` 通過像是移除所有空白的處理，可以將你的檔案減少至 200KB。
 
-You can also add the [OccurenceOrderPlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin)
+你也可以加入 [OccurenceOrderPlugin](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.
+> 透過發生次數分配 module 和 chunk 的 id。一些常用的 Id 取得較低（短）的 id。這使得 id 可以預測，透過推薦來減少檔案的大小。
 
-To be honest I'm not sure how the underlying mechanisms work, but in the current [webpack2 beta it's included by default](https://gist.github.com/sokra/27b24881210b56bbaff7) so I include it as well.
+老實說，我不太確定底層的機制是如何工作的，但在目前包含 [webpack2 beta 的預設情況下](https://gist.github.com/sokra/27b24881210b56bbaff7)，所以我將它包含在內。
 
 ```JavaScript
 // webpack.config.js
@@ -328,18 +300,13 @@ module.exports = {
 }
 ```
 
-So now we have written a config that allows us to minify and bundle our JavaScript. This bundle
-could be copied and pasted into another project's directory, and thrown into a `<script>` tag there.
-You can skip to the [conclusion](#conclusion) if you only care about the basics of using webpack
-with *only JavaScript*.
+所以現在我們寫了一個設定檔讓我們可以 minify 和 bundle 我們的 JavaScript。這個 bundle 檔案可以被複製並貼到其他的專案目錄中，放入 `<script>` 就可以使用。如果*只有 JavaScript*，而且你只在乎關於 webpack 基本的使用，你可以直接跳到[結論](#conclusion)。
 
-## A More Complete Example
+## 一個更完整的範例
 
-Alternatively, because webpack can do more than just work with JavaScript, you can avoid the
-copy-pasting and manage your entire project with webpack.
+此外，比起單單使用 JavaScript，使用 webpack 可以做的更多，你可以避免複製-貼上並透過 webpack 管理你的整個專案。
 
-In the following section, we are going to create a very simple website using webpack. If you wish to
-follow along with the example, create a directory with the structure
+在下面的部份中，我們要使用 webpack 建立一個非常簡單的網站。如果你想要跟著這個範例，建立一個像下方的目錄結構：
 
 ```
 MyDirectory
@@ -352,23 +319,22 @@ MyDirectory
 |- webpack.config.js
 ```
 
-#### Contents
+#### 內容
 
-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. [開始 Coding](#start-coding) - 我們來實際寫一些 JavaScript。
 
-#### Introducing Loaders
+#### 介紹 Loader
 
-[Example 4](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example4)
+[範例四](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example4)
 
-Earlier in the tutorial I mentioned [loaders](#loaders). These will help us require non-js files in
-our code. In this case, we will need the style loader and the css loader. First we need to install the loaders:
+在稍早前面的教學中我提到了 [loaders](#loaders)。這些程式碼來幫助我們 require 非 JavaScript 的檔案。在這種情況下，我們將需要 `style-loader` 和 `css-loader`。首先我們需要安裝這些 loader：
 
     npm install --save-dev style-loader css-loader
 
-Now that it's installed we can tweak our config to include the css loader:
+現在安裝完後，我們可以調整我們的 webpack 設定來引入 `css-loader`：
 
 ```javascript
 // webpack.config.js
@@ -398,18 +364,16 @@ module.exports = {
 }
 ```
 
-Going over the new properties one by one:
+我們一個一個複習這些屬性：
 
-* [module](http://webpack.github.io/docs/configuration.html#module) - Options affecting your files
-  * [loaders](http://webpack.github.io/docs/configuration.html#module-loaders) - An array of loaders that we specify for our application
-    * test - A regular expression to match the loader with a file
-    * loaders - Which loaders to use for files that match the test
+* [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 （正規表達式）的檔案。
 
-This time when you run `webpack`, if you `require` a file that ends in `.css`, then we will apply
-the `style` and `css` loaders to it, which adds the CSS to the bundle.
+這個時候你執行 `webpack`，如果你 `require` 的檔案結尾是 `.css`，然會我們會使用 `style` 和 `css` loader，將 CSS 加入到 bundle。
 
-If we didn't have the loaders,
-then we would get an error like this:
+如果我們沒有 loaders，我們會得到像是這樣的錯誤：
 
 ```
 ERROR in ./test.css
@@ -418,13 +382,13 @@ Line 1: Unexpected token {
 You may need an appropriate loader to handle this file type.
 ```
 
-**Optional**
+**可選項目**
 
-If you want to use SCSS instead of CSS you would need to run:
+如果你想要使用 SCSS 而不是 CSS 你需要執行：
 
     npm install --save-dev sass-loader node-sass webpack
 
-and instead your loader would be written as
+然後你的 loader 必須修改成：
 
 ```javascript
 {
@@ -433,24 +397,23 @@ and instead your loader would be written as
 }
 ```
 
-The process is similar for LESS.
+處理 LESS 也類似於這個方式。
 
-An important aspect to recognize is that there is an *order* to which these loaders need to be specified. In the above example, the `sass` loader is first applied to your `.scss` files, then the `css` loader, and finally the `style` loader. As you can see, the pattern is that these loaders are applied from right to left.
+要知道這些需要被指定的 loader 是有*順序*的，這是一個很重要部分。在上面的範例，`sass` loader 是第一個應用在你的 `.scss` 檔案，然後是 `css` loader，最後是 `style` loader。你可以看到，這些 loader 的應用模式是由右到左。
 
-#### Adding More Plugins
+#### 加入更多的 Plugin
 
-[Example 5](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example5)
+[範例五](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example5)
 
-Now that we have the infrastructure for styling our website we need an actual page to style.
-We'll be doing this through the
-[html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin),
-which lets us generate an HTML page or use an existing one. We'll use an existing one `index.html`.
+現在我們的網站有基礎的樣式，但我們還需要實際的網站樣式。
 
-First we install the plugin:
+我們通過 [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) 來做，它讓我們可以產生一個 HTML 頁面使用現有的。我們將使用一個目前現有的 `index.html`。
+
+首先我們需要安裝 plugin：
 
     npm install --save-dev html-webpack-plugin@2
 
-Then we can add it to our config
+然後在我們的 webpack 設定檔加入：
 
 ```javascript
 // webpack.config.js
@@ -484,12 +447,9 @@ module.exports = {
 }
 ```
 
-This time, when you run `webpack`, because we specified an `HtmlWebpackPlugin` with a template of
-`./src/index.html`, it will generate a file called `index.html` in our `dist` folder with the
-contents of `./src/index.html`
+這個時候當你執行 `webpack`，因為我們指定一個 `HtmlWebpackPlugin` 和 `./src/index.html` 的 template，它會產生一個檔案叫做 `index.html` 在我們的 `dist` 資料夾，而網頁的內容是 `./src/index.html`。
 
-There's no point in using `index.html` as a template if it's empty. Now would be a good time to
-actually populate it.
+如果 `index.html` 作為 template 是空的也沒用。現在是個好時機我們可以填入一些元素進去。
 
 ```html
 <html>
@@ -504,10 +464,9 @@ actually populate it.
 </html>
 ```
 
-Note that we aren't putting a `<script>` tag into our HTML for `bundle.js`. The plugin will actually
-automatically do that for you. If you do put in the script tag, you'll end up loading your same code twice.
+注意到我們沒有放入一個 `bundle.js` 的 `<script>` 標籤到我們的 HTML。實際上 plugin 會自動的幫你處理。如果你放入 script，到頭來你會載入兩次相同的程式碼。
 
-and while we're at it let's add some basic styling in `styles.css`
+而讓我們加入一些基本的樣式在 `styles.css`：
 
 ```css
 h1 {
diff --git a/part1/example1/README.md b/part1/example1/README.md
index af660ea..13b46db 100644
--- a/part1/example1/README.md
+++ b/part1/example1/README.md
@@ -1,20 +1,18 @@
-# Example 1 - Bundling and Loaders
+# 範例一 - Bundle 和 Loader
 
 ![Official Dependency Tree](http://i.imgur.com/YU4xBPQ.png)
 
-Webpack is formally referred to as a module bundler. If you want an in-depth and accessible explanation
-on modules and module bundling definitely check out these two great articles:
-[here](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.jw1txw6uh)
-and [here](https://medium.com/@preethikasireddy/javascript-modules-part-2-module-bundling-5020383cf306#.lfnspler2).
-We're gonna keep it simple. The way that it works is that you specify a single file as your entry point.
-This file will be the root of your tree. Then every time you `require` a file from another file it's
-added to the tree. When you run `webpack`, all these files/modules are bundled into a single file.
+Webpack 簡稱為模組的整合工具。如果你想要深入的話，可以拜訪「modules」和「module bundling definitely」這兩篇優秀的解釋文章：
+[JavaScript Modules: A Beginner’s Guide](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.jw1txw6uh)
+和 [JavaScript Modules Part 2: Module Bundling](https://medium.com/@preethikasireddy/javascript-modules-part-2-module-bundling-5020383cf306#.lfnspler2)。
+我們要保持它的簡單，webpack 運作的方式是透過指定一個單一檔案作為你的進入點。
+這個檔案會是 tree 的 root。然後你每次 `require` 一個檔案從其他檔案並把它加入到 tree。當你執行 `webpack`，所有的檔案和 module 都會被 bundle 成一個檔案。
 
-Here's a simple example:
+這裡是一個簡單的範例：
 
 ![Dependency Tree](http://i.imgur.com/dSghwwL.png)
 
-Given this picture you could have the directory:
+根據這樣的情況，你可以有這樣的目錄：
 
 ```
 MyDirectory
@@ -25,7 +23,7 @@ MyDirectory
 |- extraFile.js
 ```
 
-and this could be the content of your files
+這些可能是你檔案的內容：
 
 ```javascript
 // index.js
@@ -51,10 +49,9 @@ body {
 }
 ```
 
-When you run `webpack`, you'll get a bundle with the contents of this tree, but `extraFile.js`, which was in the same directory, will not be part of
-the bundle because it is not a part of the dependency tree:
+當你執行 `webpack`，你會得到一個這個 tree 的 bundle 內容，雖然 `extraFile.js` 也是在相同的目錄中，但它不是被 bundle 的一部份，因為它在 `index.js` 沒有被 `require`。
 
-`bundle.js` will look like:
+`bundle.js` 看起來會像：
 
 ```javascript
 // contents of styles.css
@@ -62,25 +59,23 @@ the bundle because it is not a part of the dependency tree:
 // contents of APIStuff.js + fetch
 ```
 
-The things that are bundled are only the things that you explicitly required across your files.
+被 bundle 的這些檔案是你明確所 require 進來的檔案。
 
 ### Loaders
 
-As you probably noticed, I did something strange in the above example. I `required` a css file in a javascript file.
+你可能會注意到，我在上方的範例做了一些奇怪的事情。我在 JavaScript 檔案中 `require` 一個 css 檔案。
 
-The really cool and interesting thing about webpack is that you can `require` more than just
-javascript files.
+關於 webpack 真的很酷，有趣的事情是，你可以 `require` 更多不只是 JavaScript 的檔案。
 
-There is this thing in webpack called a loader. Using these loaders, you can
-`require` anything from `.css` and `.html` to `.png` files.
+在 webpack 這些東西我們稱為 loader。使用這些 loader，你可以 `require` 任何 `.css` 和 `.html`  到 `.png` 檔。
 
-For example in the diagram above I had
+例如在上圖我有：
 
 ```javascript
 // index.js
 require('./styles.css')
 ```
 
-If I include [the css-loader](https://github.com/webpack/css-loader) in my webpack config, this is not only perfectly valid, but also will actually apply the CSS to my page.
+如果我在我的 webpack 設定檔中，引入 [style-loader](https://github.com/webpack/style-loader) 和 [css-loader](https://github.com/webpack/css-loader)，這不是完全有效的，但是實際上還是會應用 CSS 到我的網頁。
 
-This is just a single example of the many loaders you can use with webpack.
+你可以在 webpack 使用多個 loader，這裡只是一個單一的例子。
diff --git a/part1/example2/README.md b/part1/example2/README.md
index 4df2a6b..e7df76e 100644
--- a/part1/example2/README.md
+++ b/part1/example2/README.md
@@ -1,6 +1,6 @@
-# Example 2 - A minimal example
+# 範例二 - 一個簡單的範例
 
-Say your directory structure looks like this:
+你的目錄結構像是這樣：
 
 ```
 MyDirectory
@@ -11,7 +11,7 @@ MyDirectory
 
 ```
 
-Then a very minimal webpack config you can make is this
+然後這是一個非常簡易的 webpack 設定：
 
 ```javascript
 // webpack.config.js
@@ -26,12 +26,12 @@ module.exports = {
 }
 ```
 
-Going over the new properties one by one:
+我們一個一個複習這些屬性：
 
-* [entry](https://webpack.github.io/docs/configuration.html#entry) - The entrypoint of your bundle, which we discussed in the [bundling](#bundling) section. It's an array because webpack allows multiple entry points if you want to generate multiple bundles.
+* [entry](https://webpack.github.io/docs/configuration.html#entry) - 這是你的 bundle 的進入點，這是我們在討論 [bundling](#bundling) 的部分。`entry` 是一個陣列，根據你的需求，webpack 允許可以有多個進入點，來產生多個 bundle 檔案。
 
-* [output](https://webpack.github.io/docs/configuration.html#output) - Dictates the form of the output by webpack
-  * [path](https://webpack.github.io/docs/configuration.html#output-path) - where to put the bundle
-  * [filename](https://webpack.github.io/docs/configuration.html#output-filename) - what to call the 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 檔案名稱
 
-When you run `webpack`, this will create a file called `bundle.js` in the dist folder.
+當你執行 `webpack`，會在你的 dist 資料夾建立一個叫做 `bundle.js` 的檔案。
diff --git a/part1/example3/README.md b/part1/example3/README.md
index 03338d7..9ebe84b 100644
--- a/part1/example3/README.md
+++ b/part1/example3/README.md
@@ -1,15 +1,12 @@
-# Example 3 - Introducing Plugins
+# 範例三 - 介紹 Plugins
 
-Imagine that you've used webpack to bundle all your files together, and now you've realized that all
-together it's 900KB. This is a problem that can be ameliorated by minifying your bundle. To do this
-you need to use a plugin I mentioned earlier called the
-[UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin).
+想像一下，你使用 webpack 將你的檔案 bundle 在一起，然後你意識到 bundle 後的結果是 900KB。這裡有個問題，但是你可以透過 minify 你的 bundle 檔案來做改善。如果需要做到這一點，你需要使用一個我在前面稍早提到的 [UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) plugin。
 
-Moreover you will need to have webpack installed locally to actually be able to use the plugin.
+此外，你需要在本機安裝 webpack 才能實際的去使用這個 plugin。
 
     npm install --save-dev webpack
 
-Now you can require webpack and minify your code.
+現在你可以 require webpack 並 minify 你的程式碼。
 
 ```javascript
 // webpack.config.js
@@ -32,19 +29,18 @@ module.exports = {
   ]
 }
 ```
-Going over the new properties one by one:
+我們一個一個複習這些屬性：
 
-* plugins - An array that holds your plugins.
-  * [webpack.optimize.UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) - Minify your code, and suppress warning messages.
+* plugins - 一個可以儲存你的 plugin 的陣列。
+  * [webpack.optimize.UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) - Minify 你的程式碼，並顯示警告訊息。
 
-This time, when you run `webpack`, now that you have the `UglifyJsPlugin` this could reduce your
-imaginary 900KB file to 200KB by through processes such as removing all the whitespace.
+這個時候，當我們執行 `webpack`，`UglifyJsPlugin` 通過像是移除所有空白的處理，可以將你的檔案減少至 200KB。
 
-You can also add the [OrderOccurencePlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin)
+你也可以加入 [OccurenceOrderPlugin](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 make ids predictable, reduces to total file size and is recommended.
+> 透過發生次數分配 module 和 chunk 的 id。一些常用的 Id 取得較低（短）的 id。這使得 id 可以預測，透過推薦來減少檔案的大小。
 
-To be honest I'm not sure how the underlying mechanisms work, but in the current [webpack2 beta it's included by default](https://gist.github.com/sokra/27b24881210b56bbaff7) so I include it as well.
+老實說，我不太確定底層的機制是如何工作的，但在目前包含 [webpack2 beta 的預設情況下](https://gist.github.com/sokra/27b24881210b56bbaff7)，所以我將它包含在內。
 
 ```javascript
 // webpack.config.js
@@ -68,7 +64,4 @@ module.exports = {
 }
 ```
 
-So now we have written a config that allows us to minify and bundle our javascript. This bundle
-could be copied and pasted into another project's directory, and thrown into a `<script>` tag there.
-You can skip to the [conclusion](#conclusion) if you only care about the basics of using webpack
-with *only javascript*.
+所以現在我們寫了一個設定檔讓我們可以 minify 和 bundle 我們的 JavaScript。這個 bundle 檔案可以被複製並貼到其他的專案目錄中，放入 `<script>` 就可以使用。如果*只有 JavaScript*，而且你只在乎關於 webpack 基本的使用，你可以直接跳到[結論](#conclusion)。
diff --git a/part1/example4/README.md b/part1/example4/README.md
index 34aebac..110cbdb 100644
--- a/part1/example4/README.md
+++ b/part1/example4/README.md
@@ -1,9 +1,8 @@
-Earlier in the tutorial I mentioned [loaders](#loaders). These will help us require non-js files in
-our code. In this case, the only loader we will need is the css loader. First we need to install the loader:
+在稍早前面的教學中我提到了 [loaders](#loaders)。這些程式碼來幫助我們 require 非 JavaScript 的檔案。在這種情況下，我們將需要 `style-loader` 和 `css-loader`。首先我們需要安裝這些 loader：
 
     npm install --save-dev style-loader css-loader
 
-Now that it's installed we can tweak our config to include the css loader:
+現在安裝完後，我們可以調整我們的 webpack 設定來引入 `css-loader`：
 
 ```javascript
 // webpack.config.js
@@ -33,18 +32,16 @@ module.exports = {
 }
 ```
 
-Going over the new properties one by one:
+我們一個一個複習這些屬性：
 
-* [modules](http://webpack.github.io/docs/configuration.html#module) - Options affecting your files
-  * [loaders](http://webpack.github.io/docs/configuration.html#module-loaders) - An array of loaders that we specify for our application
-    * test - A regular expression to match the loader with a file
-    * loaders - Which loaders to use for files that match the test
+* [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 （正規表達式）的檔案。
 
-This time when you run `webpack`, if we `require` a file that ends in `.css`, then we will apply
-the `style` and `css` loaders to it, which adds the CSS to the bundle.
+這個時候你執行 `webpack`，如果你 `require` 的檔案結尾是 `.css`，然會我們會使用 `style` 和 `css` loader，將 CSS 加入到 bundle。
 
-If we didn't have the loaders,
-then we would get an error like this:
+如果我們沒有 loaders，我們會得到像是這樣的錯誤：
 
 ```
 ERROR in ./test.css
@@ -53,13 +50,13 @@ Line 1: Unexpected token {
 You may need an appropriate loader to handle this file type.
 ```
 
-**Optional**
+**可選項目**
 
-If you want to use SCSS instead of CSS you would need to run:
+如果你想要使用 SCSS 而不是 CSS 你需要執行：
 
     npm install --save-dev sass-loader node-sass webpack
 
-and instead your loader would be written as
+然後你的 loader 必須修改成：
 
 ```javascript
 {
@@ -68,6 +65,6 @@ and instead your loader would be written as
 }
 ```
 
-The process is similar for LESS.
+處理 LESS 也類似於這個方式。
 
-An important aspect to recognize is that there is an *order* to which these loaders need to be specified. In the above example, the `sass` loader is first applied to your `.scss` files, then the `css` loader, and finally the `style` loader. As you can see, the pattern is that these loaders are applied from right to left.
+要知道這些需要被指定的 loader 是有*順序*的，這是一個很重要部分。在上面的範例，`sass` loader 是第一個應用在你的 `.scss` 檔案，然後是 `css` loader，最後是 `style` loader。你可以看到，這些 loader 的應用模式是由右到左。
diff --git a/part1/example5/README.md b/part1/example5/README.md
index 9bc16bc..d4d42b1 100644
--- a/part1/example5/README.md
+++ b/part1/example5/README.md
@@ -1,15 +1,14 @@
-# Example 5 - Adding More Plugins
+# 範例五 - 加入更多的 Plugin
 
-Now that we have the infrastructure for styling our website we need an actual page to style.
-We'll be doing this through the
-[html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin),
-which lets us generate an HTML page or use an existing one. We'll use an existing one `index.html`.
+現在我們的網站有基礎的樣式，但我們還需要實際的網站樣式。
 
-First we install the plugin:
+我們通過 [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) 來做，它讓我們可以產生一個 HTML 頁面使用現有的。我們將使用一個目前現有的 `index.html`。
+
+首先我們需要安裝 plugin：
 
     npm install --save-dev html-webpack-plugin@2
 
-Then we can add it to our config
+然後在我們的 webpack 設定檔加入：
 
 ```javascript
 // webpack.config.js
@@ -43,12 +42,9 @@ module.exports = {
 }
 ```
 
-This time, when you run `webpack`, because we specified an `HtmlWebpackPlugin` with a template of
-`./src/index.html`, it will generate a file called `index.html` in our `dist` folder with the
-contents of `./src/index.html`
+這個時候當你執行 `webpack`，因為我們指定一個 `HtmlWebpackPlugin` 和 `./src/index.html` 的 template，它會產生一個檔案叫做 `index.html` 在我們的 `dist` 資料夾，而網頁的內容是 `./src/index.html`。
 
-There's no point in using `index.html` as a template if it's empty. Now would be a good time to
-actually populate it.
+如果 `index.html` 作為 template 是空的也沒用。現在是個好時機我們可以填入一些元素進去。
 
 ```html
 <html>
@@ -64,7 +60,9 @@ actually populate it.
 </html>
 ```
 
-and while we're at it let's add some basic styling in `styles.css`
+注意到我們沒有放入一個 `bundle.js` 的 `<script>` 標籤到我們的 HTML。實際上 plugin 會自動的幫你處理。如果你放入 script，到頭來你會載入兩次相同的程式碼。
+
+而讓我們加入一些基本的樣式在 `styles.css`：
 
 ```css
 h1 {
@@ -88,21 +86,16 @@ button {
 }
 ```
 
-#### Side note
+#### 備註
 
-I feel like I should mention that the `html-webpack-plugin` should
-be used sparingly. To me, webpack should generate HTML files if you just have a really simple
-one to bootstrap a SPA. So while it was useful for the learning experience, which required only
-one HTML file, I wouldn't recommend it to generate 12 HTML files. This doesn't mean you can't use
-html files with something like angular directives, which require HTML template files. In that case
-you could do something like:
+我覺得我應該提到 `html-webpack-plugin` 需要謹慎使用。對我來說，如果你真的只是簡單的啟用一個 SPA，webpack 應該只產生 HTML 檔案。這裡只需要一個 HTML 檔案，我不會推薦它來產生 12 HTML 檔案，當作一個學習經驗。這意思不是說你不能使用 html 檔案之類的，像是 angular 指令，只需要 HTML template 檔案。在這個情況下你可以做類似像是：
 
 ```javascript
 // ...directive stuff
-template: require('./templates/button.html') // using raw loader
+template: require('./templates/button.html') // 使用 raw loader
 ```
 
-Instead, it means that you should not be doing something like this:
+相反的，它意味著你不應該做這樣的事情︰
 
 ```javascript
 new HtmlWebpackPlugin
@@ -115,4 +108,4 @@ new HtmlWebpackPlugin({
 })
 ```
 
-Anyone with other experience feel free to correct me if I'm wrong.
+如果我錯了，任何有經驗的人請隨時糾正我。

From bd62391b28fce61e4a82348139ef5cb9be559189 Mon Sep 17 00:00:00 2001
From: Peng-Jie <dean.leehom@gmail.com>
Date: Tue, 3 May 2016 08:30:13 +0800
Subject: [PATCH 2/5] translate ex5 ex6

---
 part1/README.md          | 72 +++++++++++++++-------------------------
 part1/example5/README.md |  2 +-
 part1/example6/README.md | 60 ++++++++++++---------------------
 3 files changed, 49 insertions(+), 85 deletions(-)

diff --git a/part1/README.md b/part1/README.md
index d60fea1..a22d1ac 100644
--- a/part1/README.md
+++ b/part1/README.md
@@ -33,8 +33,8 @@
 * [一個更完整的範例](#a-more-complete-example)
   * [介紹 Loaders](#introducing-loaders)
   * [加入更多 Plugins](#adding-more-plugins)
-  * [The Development Server](#the-development-server)
-  * [Start Coding](#start-coding)
+  * [開發伺服器](#the-development-server)
+  * [開始撰寫程式](#start-coding)
 * [結論](#conclusion)
 * [結束後的思考](#closing-thoughts)
 
@@ -324,7 +324,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。
-4. [開始 Coding](#start-coding) - 我們來實際寫一些 JavaScript。
+4. [開始撰寫程式](#start-coding) - 我們來實際寫一些 JavaScript。
 
 #### 介紹 Loader
 
@@ -490,23 +490,18 @@ button {
 }
 ```
 
-#### The Development Server
+#### 開發伺服器
 
-[Example 6](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example6)
+[範例六](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example6)
 
-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
+現在我們想要實際在瀏覽器看到我們的網站，需要一個 web 伺服器來服務我們的程式碼。webpack 自帶了方便的 `webpack-dev-server`，你需要在本機和全域安裝。
 
     npm install -g webpack-dev-server
     npm install --save-dev webpack-dev-server
 
-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.
+dev server 可以在瀏覽器看到你的網站是怎麼樣子以及可以更快速的開發，是一個相當有用的資源。預設情況下你可以拜訪 `http://localhost:8080`。不幸的是，像是 hot reloading 的功能並不是內建的，還需要一些其他的設定。
 
-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`.
+這是 webpack 設定檔一個很棒的分離點，意思是說你可以將他分成用於「development」以及「production」。因為我們必須在這個教學中保持簡單的方式，所不會有很大的改變，但是會介紹 webpack 很棒的可設置性。我們稱他們為 `webpack.config.dev.js` 和 `webpack.config.prod.js`。
 
 ```javascript
 // webpack.config.dev.js
@@ -545,22 +540,20 @@ module.exports = {
 ```
 
 
-**Changes**
+**修改**
 
-1. The dev config omits the optimizations as they are unnecessary overhead when you are constantly
-rebuilding. So no `webpack.optimize` plugins.
+1. dev 設定檔省略了優化，當你不斷的 rebuild 時，他們不是必要的。所以不需要 `webpack.optimize` plugins。
 
-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).
+2. dev 設定檔需要對 dev server 做必要的設定，你可以到[這裡](https://webpack.github.io/docs/webpack-dev-server.html)了解更多。
 
-Summarized:
+總結：
 
-* entry: The two new entry points connect the server to the browser to allow for HMR.
+* entry: 兩個新的進入點將伺服器連結到瀏覽器，方便 HMR。
 * devServer
-  * contentBase: Where to serve files from
-  * hot: enable HMR
+  * contentBase: 服務的檔案來自哪裡。
+  * hot: 啟用 HMR。
 
-The prod config doesn't change much
+prod 設定檔不需要改變太多：
 
 ```javascript
 // webpack.config.prod.js
@@ -595,28 +588,22 @@ module.exports = {
 }
 ```
 
-I've also added a brand new property to both the dev config and the prod config:
+我也加入一個全新的屬性在 dev 和 prod 設定檔：
 
-* [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.
+* [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`。
 
-To run the dev server we have to run
+如果要執行 dev server，我們可以執行：
 
     webpack-dev-server --config webpack.config.dev.js
 
-and to build the production code we have to run
+如果我們要 build production 的程式碼，我們可以執行：
 
     webpack --config webpack.config.prod.js
 
 
-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.
+如果想要讓這些指令使用的更容易，我們可以到 `package.json` 來設定簡單的 script。
 
-We add the `scripts` property to the config
+我們加入 `scripts` 屬性到設定檔：
 
 ```javascript
 // package.json
@@ -630,25 +617,20 @@ We add the `scripts` property to the config
 }
 ```
 
-We can run these commands with
+我們可以執行這些指令：
 
 ```
 npm run build
 npm run dev
 ```
 
-You can now view your beautiful website by running `npm run dev`, and navigating to
-`http://localhost:8080`.
+你現在可以透過 `npm run dev`，並導到 `http://localhost:8080` 看到你的網站。
 
-**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.
+**備註：** 當我正在測試這個部份時，我明白到當我修改 `index.html` 檔案時，伺服器不能 hot reload。 解決這個問題的方法在 [html-reload](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/html-reload)。這裡涵蓋了一些 webpack 設定檔選項的有用資訊，我推薦你可以看一下，但是我把它分開了，因為我覺得會因為這個不太重要的原因，這會延長這個教學。
 
-#### Start Coding
+#### 開始撰寫程式
 
-[Example 7](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example7)
+[範例七](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
index d4d42b1..cd9261d 100644
--- a/part1/example5/README.md
+++ b/part1/example5/README.md
@@ -108,4 +108,4 @@ new HtmlWebpackPlugin({
 })
 ```
 
-如果我錯了，任何有經驗的人請隨時糾正我。
+如果我錯了，請任何有這方面經驗的人隨時糾正我。
diff --git a/part1/example6/README.md b/part1/example6/README.md
index 49e68e0..795da0f 100644
--- a/part1/example6/README.md
+++ b/part1/example6/README.md
@@ -1,18 +1,13 @@
-# Example 6 - The Development 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
+現在我們想要實際在瀏覽器看到我們的網站，需要一個 web 伺服器來服務我們的程式碼。webpack 自帶了方便的 `webpack-dev-server`，你需要在本機和全域安裝。
 
     npm install -g webpack-dev-server
     npm install --save-dev webpack-dev-server
 
-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.
+dev server 可以在瀏覽器看到你的網站是怎麼樣子以及可以更快速的開發，是一個相當有用的資源。預設情況下你可以拜訪 `http://localhost:8080`。不幸的是，像是 hot reloading 的功能並不是內建的，還需要一些其他的設定。
 
-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`.
+這是 webpack 設定檔一個很棒的分離點，意思是說你可以將他分成用於「development」以及「production」。因為我們必須在這個教學中保持簡單的方式，所不會有很大的改變，但是會介紹 webpack 很棒的可設置性。我們稱他們為 `webpack.config.dev.js` 和 `webpack.config.prod.js`。
 
 ```javascript
 // webpack.config.dev.js
@@ -51,23 +46,21 @@ module.exports = {
 ```
 
 
-**Changes**
+**修改**
 
-1. The dev config omits the optimizations as they are unnecessary overhead when you are constantly
-rebuilding. So no `webpack.optimize` plugins.
+1. dev 設定檔省略了優化，當你不斷的 rebuild 時，他們不是必要的。所以不需要 `webpack.optimize` plugins。
 
-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).
+2. dev 設定檔需要對 dev server 做必要的設定，你可以到[這裡](https://webpack.github.io/docs/webpack-dev-server.html)了解更多。
 
-Summarized:
+總結：
 
-* entry: The two new entry points connect the server to the browser to allow for HMR.
+* entry: 兩個新的進入點將伺服器連結到瀏覽器，方便 HMR。
 * devServer
-  * contentBase: Where to serve files from
-  * hot: enable HMR
+  * contentBase: 服務的檔案來自哪裡。
+  * hot: 啟用 HMR。
 ---
 
-The prod config doesn't change much
+prod 設定檔不需要改變太多：
 
 ```javascript
 // webpack.config.prod.js
@@ -102,28 +95,22 @@ module.exports = {
 }
 ```
 
-I've also added a brand new property to both the dev config and the prod config:
+我也加入一個全新的屬性在 dev 和 prod 設定檔：
 
-* [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.
+* [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`。
 
-To run the dev server we have to run
+如果要執行 dev server，我們可以執行：
 
     webpack-dev-server --config webpack.config.dev.js
 
-and to build the production code we have to run
+如果我們要 build production 的程式碼，我們可以執
 
     webpack --config webpack.config.prod.js
 
 
-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.
+如果想要讓這些指令使用的更容易，我們可以到 `package.json` 來設定簡單的 script。
 
-We add them `scripts` property of the config
+我們加入 `scripts` 屬性到設定檔：
 
 ```javascript
 // package.json
@@ -137,18 +124,13 @@ We add them `scripts` property of the config
 }
 ```
 
-We can run these commands with
+我們可以執行這些指令：
 
 ```
 npm run build
 npm run dev
 ```
 
-You can now view your beautiful website by running `npm run dev`, and navigating to
-`http://localhost:8080`.
+你現在可以透過 `npm run dev`，並導到 `http://localhost:8080` 看到你的網站。
 
-**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.
+**備註：** 當我正在測試這個部份時，我明白到當我修改 `index.html` 檔案時，伺服器不能 hot reload。 解決這個問題的方法在 [html-reload](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/html-reload)。這裡涵蓋了一些 webpack 設定檔選項的有用資訊，我推薦你可以看一下，但是我把它分開了，因為我覺得會因為這個不太重要的原因，這會延長這個教學。

From ba31110fb84c06cfdd65db9511485fdccd3a62af Mon Sep 17 00:00:00 2001
From: Peng-Jie <dean.leehom@gmail.com>
Date: Tue, 3 May 2016 08:36:19 +0800
Subject: [PATCH 3/5] resolve conflict

---
 part1/README.md          | 6 +++---
 part1/example2/README.md | 6 +++---
 part1/example5/README.md | 1 -
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/part1/README.md b/part1/README.md
index a22d1ac..7048824 100644
--- a/part1/README.md
+++ b/part1/README.md
@@ -226,9 +226,9 @@ module.exports = {
 
 * [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 檔案位置
-  * [filename](https://webpack.github.io/docs/configuration.html#output-filename) - 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` 的檔案。
 
diff --git a/part1/example2/README.md b/part1/example2/README.md
index e7df76e..d29f900 100644
--- a/part1/example2/README.md
+++ b/part1/example2/README.md
@@ -30,8 +30,8 @@ module.exports = {
 
 * [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 檔案位置
-  * [filename](https://webpack.github.io/docs/configuration.html#output-filename) - 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` 的檔案。
diff --git a/part1/example5/README.md b/part1/example5/README.md
index aee7d23..cd9261d 100644
--- a/part1/example5/README.md
+++ b/part1/example5/README.md
@@ -60,7 +60,6 @@ module.exports = {
 </html>
 ```
 
-<<<<<<< HEAD
 注意到我們沒有放入一個 `bundle.js` 的 `<script>` 標籤到我們的 HTML。實際上 plugin 會自動的幫你處理。如果你放入 script，到頭來你會載入兩次相同的程式碼。
 
 而讓我們加入一些基本的樣式在 `styles.css`：

From d8c36bf8d7e1ed224c59549075e8f0067f67c601 Mon Sep 17 00:00:00 2001
From: Peng-Jie <dean.leehom@gmail.com>
Date: Tue, 3 May 2016 10:44:52 +0800
Subject: [PATCH 4/5] finish part1

---
 README.md                   |  4 +-
 part1/README.md             | 73 +++++++++++++++----------------------
 part1/css-extract/README.md | 19 ++++------
 part1/example5/README.md    |  4 +-
 part1/example6/README.md    |  4 +-
 part1/example7/README.md    | 25 +++++--------
 part1/html-reload/README.md | 48 ++++++++----------------
 7 files changed, 68 insertions(+), 109 deletions(-)

diff --git a/README.md b/README.md
index 0a58392..6b305c6 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# Webpack 初學者教學 :school:
+# Webpack 初學者教學課程 :school:
 
-Webpack 剛開始對我來說是很困難的。我想要建立一個對初學者友善，而且對 webpack 有非常全面的介紹。
+Webpack 剛開始對我來說是很困難的，所以我想要建立一個對初學者友善，而且對 webpack 有著非常全面的介紹教學。
 
 - [Part 1](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1) - Webpack 基礎和設定。
 - [Part 2](https://github.com/AriaFallah/WebpackTutorial/tree/master/part2) - Babel、Lint、以及環境變數。
diff --git a/part1/README.md b/part1/README.md
index 7048824..b89869c 100644
--- a/part1/README.md
+++ b/part1/README.md
@@ -1,4 +1,4 @@
-# Webpack 初學者教學 Part 1 - Webpack 簡介 :zap:
+# Webpack 初學者教學課程 Part 1 - Webpack 簡介 :zap:
 
 對於像我這樣的人來說，第一次接觸到 webpack 是像是這些 repository：
 
@@ -8,7 +8,7 @@
 雖然這些 repository 放在一起很棒，但它們不一定是最好的學習工具。
 像我的情況，我試著了解發生了那些事情，但還是很困惑，所以我決定不從這些大量而且分散的資源來理解。
 
-我希望這個教學可以讓 webpack 更容易的學習。
+我希望這個教學課程可以讓 webpack 更容易的學習。
 
 ## 需求
 
@@ -40,7 +40,7 @@
 
 ## 為什麼要 Webpack？
 
-因為每個 react 或 redux 教學都假設你知道什麼是 webpack。:cry:
+因為每個 react 或 redux 教學課程都假設你知道什麼是 webpack。:cry:
 
 以下這些是更現實的原因，你可能需要使用 webpack。
 
@@ -79,7 +79,7 @@
 
     npm install -g webpack
 
-然而 webpack 有些功能，像是優化的 plugins，需要你將它安裝在本機。想這種情況下你需要：
+然而 webpack 有些功能，像是優化的 plugins，需要你將它安裝在本機。像這種情況下你需要：
 
     npm install --save-dev webpack
 
@@ -103,9 +103,8 @@
 
 ![Official Dependency Tree](http://i.imgur.com/YU4xBPQ.png)
 
-Webpack 簡稱為模組的整合工具。如果你想要深入的話，可以拜訪「modules」和「module bundling definitely」這兩篇優秀的解釋文章：
-[JavaScript Modules: A Beginner’s Guide](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.jw1txw6uh)
-和 [JavaScript Modules Part 2: Module Bundling](https://medium.com/@preethikasireddy/javascript-modules-part-2-module-bundling-5020383cf306#.lfnspler2)。
+Webpack 簡稱為模組整合工具。如果你想要深入的話，可以拜訪 [JavaScript Modules: A Beginner’s Guide](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.jw1txw6uh) 和 [JavaScript Modules Part 2: Module Bundling](https://medium.com/@preethikasireddy/javascript-modules-part-2-module-bundling-5020383cf306#.lfnspler2) 這兩篇優秀的解釋文章：
+
 我們要保持它的簡單，webpack 運作的方式是透過指定一個單一檔案作為你的進入點。
 這個檔案會是 tree 的 root。然後你每次 `require` 一個檔案從其他檔案並把它加入到 tree。當你執行 `webpack`，所有的檔案和 module 都會被 bundle 成一個檔案。
 
@@ -276,7 +275,7 @@ module.exports = {
 
 > 透過發生次數分配 module 和 chunk 的 id。一些常用的 Id 取得較低（短）的 id。這使得 id 可以預測，透過推薦來減少檔案的大小。
 
-老實說，我不太確定底層的機制是如何工作的，但在目前包含 [webpack2 beta 的預設情況下](https://gist.github.com/sokra/27b24881210b56bbaff7)，所以我將它包含在內。
+老實說，我不太確定底層的機制是如何工作的，但在根據目前 [webpack2 beta 的預設情況下](https://gist.github.com/sokra/27b24881210b56bbaff7)，所以我將它包含在內。
 
 ```JavaScript
 // webpack.config.js
@@ -330,7 +329,7 @@ MyDirectory
 
 [範例四](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example4)
 
-在稍早前面的教學中我提到了 [loaders](#loaders)。這些程式碼來幫助我們 require 非 JavaScript 的檔案。在這種情況下，我們將需要 `style-loader` 和 `css-loader`。首先我們需要安裝這些 loader：
+在稍早前面的教學課程中我提到了 [loaders](#loaders)。這些程式碼來幫助我們 require 非 JavaScript 的檔案。在這種情況下，我們將需要 `style-loader` 和 `css-loader`。首先我們需要安裝這些 loader：
 
     npm install --save-dev style-loader css-loader
 
@@ -501,7 +500,7 @@ button {
 
 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
@@ -626,37 +625,31 @@ 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 設定檔選項的有用資訊，我推薦你可以看一下，但是我把它分開了，因為我覺得會因為這個不太重要的原因，這會延長這個教學課程。
 
 #### 開始撰寫程式
 
 [範例七](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
-climax of our tutorial.
+大多數的人似乎會慌亂的原因是因為：webpack 事實上需要通過這些取得的進入點來撰寫 JavaScript；然而我們現在已經到達了這個教學課程最高潮的部分。
 
-Just in case you haven't already: do `npm run dev`, and navigate to `http://localhost:8080`. Setting
-up that dev server with hot reloading wasn't for show. Every single time you save while editing
-any part of your project, the browser will reload to show your changes.
+如果你還沒準備好：執行 `npm run dev`，以及導到 `http://localhost:8080`。設定 dev server 不顯示 hot reload。在你每次儲存你專案所編輯的任何一個檔案部份時，瀏覽器將會重新載入來顯示你的修改。
 
-We are also going to require a npm package just to demonstrate how you can use them in your
-frontend now.
+我們也需要 npm package，為了來示範如何在前端使用它們。
 
     npm install --save pleasejs
 
-PleaseJS is a random color generator, which we're going to hook up to our button to change the color
-of our div.
+PleaseJS 是一個隨機色彩的產生器，其中我們需要在按鈕中加入 hook 來改變我們的 div 顏色。
 
 ```javascript
 // index.js
 
-// Accept hot module reloading
+// 接受 hot module reloading
 if (module.hot) {
   module.hot.accept()
 }
 
-require('./styles.css') // The page is now styled
+require('./styles.css') // 網頁現在有了樣式
 var Please = require('pleasejs')
 var div = document.getElementById('color')
 var button = document.getElementById('button')
@@ -668,8 +661,7 @@ function changeColor() {
 button.addEventListener('click', changeColor)
 ```
 
-Interestingly, [in order for Hot Module Replacement to work](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html#what-is-needed-to-use-it)
-You need to include the code:
+有趣的是，[為了讓 Hot Module Replacement 可以執行](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html#what-is-needed-to-use-it)，你需要加入下面的程式碼：
 
 ```javascript
 if (module.hot) {
@@ -677,32 +669,27 @@ if (module.hot) {
 }
 ```
 
-in a module or a parent of that module.
+在一個 module 或是它的父 module。
 
-and we're done!
+然後我們就完成了！
 
-**Side Note:** You might have noticed a delay before your css was applied, or maybe you hate the
-fact that your css is in your javascript file. I've put aside an example,
-[css-extract](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/css-extract),
-that describes how to put your CSS in a different file.
+**備註：** 你可能已經注意到在你的 css 被使用之前有些 delay，或許事實上你討厭你的 css 在你的 JavaScript 檔案中。我留了另一個範例，[css-extract](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/css-extract)，描述如何將你的 CSS 放在不同的檔案。
 
-## Conclusion
+## 結論
 
-I hope this is helpful.
+我希望這些是有幫助的。
 
-Webpack first and foremost is a module bundler. It's an extremely modular and useful tool,
-which, in fact, is not chained to ES6 and React.
+Webpack 首先最重要的它是一個模組整合工具。它是一個相當模組化和有用的工具，事實上，它不是被限制在 ES6 和 React。
 
-Now given that
+現在考慮到
 
-* Part 2 will address using Webpack to transpile ES6 to ES5 with Babel
-* Part 3 will address using Webpack with React + Babel
+* Part 2 將解決使用 Webpack 透過 Babel 將 ES6 轉換到 ES5。
+* Part 3 將解決使用 Webpack 和 React + Babel。
 
-Since those are the most common use cases.
+因為這是這常見的例子。
 
-## Closing Thoughts
+## 結束後的思考
 
-Congratulations! You made a button that changes the color of a div! Isn't webpack great?
+恭喜！你已經讓你個按鈕去改變你的 div 的顏色！webpack 是不是很棒？
 
-Yes it is; however, if all you're doing is making a button that changes the color of a div, it's
-probably not worth it writing a config like this. If you do, you might get...fatigued :anguished:
+沒錯是的；但是，如果你所做的事情只是讓按鈕去改變 div 的顏色，它可能不值得你去寫像是這樣的設定。如果你想這麼做的話，你可能會感到...疲累 :anguished:
diff --git a/part1/css-extract/README.md b/part1/css-extract/README.md
index 91fcb70..2f6f6c6 100644
--- a/part1/css-extract/README.md
+++ b/part1/css-extract/README.md
@@ -1,12 +1,10 @@
-# Extra - Extract Your CSS
+# 番外 - 提取你的 CSS
 
-Ok so now you've finished, but in production you don't want your CSS file to be inline with your
-javascript. For this purpose we'll be using the
-[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
 
-And we make the necessary changes to our webpack prod config:
+我們需要改變我們的 webpack prod 設定檔案：
 
 ```javascript
 var path = require('path')
@@ -42,14 +40,11 @@ module.exports = {
 }
 ```
 
-These changes come straight from the README of the
-[official-repo](https://github.com/webpack/extract-text-webpack-plugin). Make sure to take a look if
-you want to know how it works more in depth.
+這些修改來自[官方 repo](https://github.com/webpack/extract-text-webpack-plugin) README 的描述。如果你想要知道它是怎麼運作的，可以到官方相關文件做更深入的了解。
 
-> It moves every require("style.css") in entry chunks into a separate css output file. So your styles are no longer inlined into the javascript, but separate in a css bundle file (styles.css). If your total stylesheet volume is big, it will be faster because the stylesheet bundle is loaded in parallel to the javascript bundle.
+> 它在進入點將每個 require("style.css") chunk 成獨立的 css 輸出檔案。所以你的樣式不會在 JavaScript 內了，但是它會被分離到一個 css bundle 檔案（styles.css）。如果你的 stylesheet 很大，在 JavaScript bundle 時，stylesheet bundle 會被平行的載入，可以加快載入的速度。
 
-Now if you do an `npm run build` using this config your CSS will be in a separate file, and
-interestingly, already included in your `index.html`.
+如果現在你執行 `npm run build`，你的 CSS 會必獨立成一個檔案，有趣的是，它已經被引入到你的 `index.html` 了。
 
 ```html
 <html>
@@ -60,7 +55,7 @@ interestingly, already included in your `index.html`.
 <body>
   <h1>Very Website</h1>
   <section id="color"></section>
-  <button id="button">Such Button</button>  
+  <button id="button">Such Button</button>
 <script src="bundle.js"></script></body>
 </html>
 ```
diff --git a/part1/example5/README.md b/part1/example5/README.md
index cd9261d..dbfcc85 100644
--- a/part1/example5/README.md
+++ b/part1/example5/README.md
@@ -88,7 +88,7 @@ button {
 
 #### 備註
 
-我覺得我應該提到 `html-webpack-plugin` 需要謹慎使用。對我來說，如果你真的只是簡單的啟用一個 SPA，webpack 應該只產生 HTML 檔案。這裡只需要一個 HTML 檔案，我不會推薦它來產生 12 HTML 檔案，當作一個學習經驗。這意思不是說你不能使用 html 檔案之類的，像是 angular 指令，只需要 HTML template 檔案。在這個情況下你可以做類似像是：
+我覺得我應該提到 `html-webpack-plugin` 需要謹慎使用。對我來說，如果你真的只是簡單的啟用一個 SPA，webpack 應該只產生 HTML 檔案。這裡只需要一個 HTML 檔案，我不會推薦它來產生 12 個 HTML 檔案，當作一個學習經驗。這意思不是說你不能使用 html 檔案之類的，像是 angular 指令，只需要 HTML template 檔案。在這個情況下你可以做類似像是：
 
 ```javascript
 // ...directive stuff
@@ -108,4 +108,4 @@ new HtmlWebpackPlugin({
 })
 ```
 
-如果我錯了，請任何有這方面經驗的人隨時糾正我。
+如果我這個部份我搞錯了，請任何有這方面經驗的人隨時糾正我。
diff --git a/part1/example6/README.md b/part1/example6/README.md
index 795da0f..4d68840 100644
--- a/part1/example6/README.md
+++ b/part1/example6/README.md
@@ -5,7 +5,7 @@
     npm install -g webpack-dev-server
     npm install --save-dev webpack-dev-server
 
-dev server 可以在瀏覽器看到你的網站是怎麼樣子以及可以更快速的開發，是一個相當有用的資源。預設情況下你可以拜訪 `http://localhost:8080`。不幸的是，像是 hot reloading 的功能並不是內建的，還需要一些其他的設定。
+dev server 可以在瀏覽器看到你的網站是怎麼樣子以及可以更快速的開發，是一個相當有用的資源。預設情況下你可以拜訪 `http://localhost:8080`。不幸的是，像是 hot reload 的功能並不是內建的，還需要一些其他的設定。
 
 這是 webpack 設定檔一個很棒的分離點，意思是說你可以將他分成用於「development」以及「production」。因為我們必須在這個教學中保持簡單的方式，所不會有很大的改變，但是會介紹 webpack 很棒的可設置性。我們稱他們為 `webpack.config.dev.js` 和 `webpack.config.prod.js`。
 
@@ -95,7 +95,7 @@ module.exports = {
 }
 ```
 
-我也加入一個全新的屬性在 dev 和 prod 設定檔：
+我也加入一個全新的屬性在 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`。
 
diff --git a/part1/example7/README.md b/part1/example7/README.md
index 89590e0..004fd7d 100644
--- a/part1/example7/README.md
+++ b/part1/example7/README.md
@@ -1,30 +1,24 @@
-# Example 7 - Start Coding
+# 範例七 - 開始撰寫程式
 
-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
-climax of our tutorial.
+大多數的人會慌亂的原因似乎是因為：webpack 事實上需要通過這些取得的進入點來撰寫 JavaScript；然而我們現在已經到達了這個教學課程最高潮的部分。
 
-Just in case you haven't already: do `npm run dev`, and navigate to `http://localhost:8080`. Setting
-up that dev server with hot reloading wasn't for show. Every single time you save while editing
-any part of your project, the browser will reload to show your changes.
+如果你還沒準備好：執行 `npm run dev`，以及導到 `http://localhost:8080`。設定 dev server 是不是可以 hot reload。在你每次儲存你專案所編輯的任何一個檔案部份時，瀏覽器將會重新載入來顯示你的修改。
 
-We are also going to require a npm package just to demonstrate how you can use them in your
-frontend now.
+我們也需要一個 npm package，為了來示範如何在前端使用它們。
 
     npm install --save pleasejs
 
-PleaseJS is a random color generator, which we're going to hook up to our button to change the color
-of our div.
+PleaseJS 是一個隨機色彩的產生器，其中我們需要在按鈕中加入 hook 來改變我們的 div 顏色。
 
 ```javascript
 // index.js
 
-// Accept hot module reloading
+// 接受 hot module reloading
 if (module.hot) {
   module.hot.accept()
 }
 
-require('./styles.css') // The page is now styled
+require('./styles.css') // 網頁現在有了樣式
 var Please = require('pleasejs')
 var div = document.getElementById('color')
 var button = document.getElementById('button')
@@ -36,8 +30,7 @@ function changeColor() {
 button.addEventListener('click', changeColor)
 ```
 
-Interestingly, [in order for Hot Module Replacement to work](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html#what-is-needed-to-use-it)
-You need to include the code:
+有趣的是，[為了讓 Hot Module Replacement 可以執行](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html#what-is-needed-to-use-it)，你需要加入下面的程式碼：
 
 ```javascript
 if (module.hot) {
@@ -45,4 +38,4 @@ if (module.hot) {
 }
 ```
 
-in a module or a parent of that module.
+在一個 module 或是它的父 module。
diff --git a/part1/html-reload/README.md b/part1/html-reload/README.md
index f1deaf5..be34c78 100644
--- a/part1/html-reload/README.md
+++ b/part1/html-reload/README.md
@@ -1,25 +1,17 @@
-# Extra - Make your HTML hot reload
+# 番外 - 讓你的 HTML 可以 hot reload
 
-So while I was testing I realized that index.html would not hot reload! After searching for a bit
-I finally came across
-[this helpful answer](http://stackoverflow.com/questions/33183931/how-to-watch-index-html-using-webpack-dev-server-and-html-webpack-plugin),
-which will require
-[one more loader](https://github.com/webpack/raw-loader) to make our hacky solution come to life,
-and [one more plugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin) to prevent
-our hacky solution from going into production.
+所以，當我測試的時候我才知道 `index.html` 不會被 hot reload！在之後搜尋的結果，我最後找到了[有幫助的答案](http://stackoverflow.com/questions/33183931/how-to-watch-index-html-using-webpack-dev-server-and-html-webpack-plugin)，
+這需要一個 [loader](https://github.com/webpack/raw-loader) 來讓我們 hacky，也需要另一個 [plugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin) 來防止這個 hacky 到 production。
 
-Basically to make Webpack hot reload our HTML we need to make it part of our dependency tree by
-requiring it in one of our files. In order to do this, we will be using the `raw-loader` loader,
-which pulls our HTML into javascript as a string, but additionally will do exactly what we need:
-add the HTML to the dependency tree.
+基本上要讓 webpack 可以 hot reload 我們的 HTML，我們需要 require 我們其中檔案之一，讓它變成我們 dependency tree 的一部份。為了做到這一點，我們將會使用 `raw-loader` loader，它可以 pull 我們的 HTML 變成字串到我們的 JavaScript，但是另外我們真正需要做的是：加入 HTML 到 dependency tree。
 
-So lets add the loader to our dev config:
+所以讓我們加入這個 loader 到我們的 dev 設定檔：
 
-First we install with
+首先我們需要安裝：
 
     npm install --save-dev raw-loader
 
-Then we can add it:
+然我們加入：
 
 ```javascript
 // webpack.config.dev.js
@@ -50,7 +42,7 @@ module.exports = {
       loaders: ['style', 'css']
     }, {
       test: /\.html$/,
-      loader: "raw-loader" // loaders: ['raw-loader'] is also perfectly acceptable.
+      loader: "raw-loader" // loaders: ['raw-loader']，這個方式也是可以被接受的。
     }]
   },
   devServer: {
@@ -60,29 +52,22 @@ module.exports = {
 }
 ```
 
-This time, when you run `webpack`, if we `require` a file that ends in `.html`, then we will apply
-the `raw-loader` loader to it, which adds the HTML to the bundle.
+這個時候當你執行 `webpack`，如果們 `require` 一個檔案它的附檔名是 `.html`，然後我們將使用 `raw-loader` loader ，其中加入 HTML 到 bundle。
 
-Now in our currently empty `index.js` file we can do.
+現在我們目前空的 `index.js` 檔案我們可以這麼做。
 
 ```javascript
 // index.js
 require('./index.html')
 ```
 
-If you were to check now, hot reloading should be working, but also you should realize we just
-required `index.html` in our `index.js`, and then did absolutely nothing with it. We don't want
-to do that in production, which is why we will be using the handy dandy
-[DefinePlugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin).
+如果你現在要檢查 hot reload 是否可以執行，但是你必須要知道我們只是 require `index.html` 到我們的 `index.js`，這麼做絕對與 hot reload 無關。我們不想要在 production 使用 hot reload，這就是為什麼我們要使用 [DefinePlugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin)。
 
-The plugin lets us create a global constant for our entire bundle, which we could name anything,
-such as `DONT_USE_IN_PRODUCTION: true`, but more practically, a popular choice that looks a bit more
-familiar is `process.env.NODE_ENV: JSON.stringify('production')`. Why JSON.stringify? Because
-according to the docs:
+這個 plugin 讓我們建立一個全域的常數到我們整個 bundle，我們可以命名任何東西，像是：`DONT_USE_IN_PRODUCTION: true`，但實際上，更普遍的做法會像是 `process.env.NODE_ENV: JSON.stringify('production')`。為什麼要 `JSON.stringify`？根據文件的解釋：
 
-> If the value is a string it will be used as a code fragment.
+> 如果值是一個字串，它會被作為一個程式碼片段。
 
-Now that we know that, we'll be adding this plugin to our production config:
+現在我們已經了解了，我們可以加入這個 plugin 到我們的 production 設定檔：
 
 ```javascript
 // webpack.config.prod.js
@@ -120,7 +105,7 @@ module.exports = {
 }
 ```
 
-and in our `index.js` we will add a condition
+並在我們的 `index.js` 加入一個條件判斷：
 
 ```javascript
 if (process.env.NODE_ENV !== 'production') {
@@ -128,5 +113,4 @@ if (process.env.NODE_ENV !== 'production') {
 }
 ```
 
-Phew problem solved. In a production build, when we don't need the `index.html` as part of the
-dependency tree, we won't require `index.html`, which also means we don't need the `raw-loader`.
+解決問題啦。在 production build 中，我們不需要 `index.html` 做為 dependency tree 的一部份，我們不需要 `index.html`，這也意味著我們不需要 `raw-loader`。

From 6351938720e1f2d58a46ca69b80d442a1b7f1ab5 Mon Sep 17 00:00:00 2001
From: Peng-Jie <dean.leehom@gmail.com>
Date: Wed, 4 May 2016 08:38:25 +0800
Subject: [PATCH 5/5] move translate file to new folder. save original file

---
 part1/README.md                               | 426 ++++++-----
 part1/css-extract/README.md                   |  19 +-
 part1/example1/README.md                      |  42 +-
 part1/example2/README.md                      |  18 +-
 part1/example3/README.md                      |  31 +-
 part1/example4/README.md                      |  31 +-
 part1/example5/README.md                      |  40 +-
 part1/example6/README.md                      |  60 +-
 part1/example7/README.md                      |  25 +-
 part1/html-reload/README.md                   |  48 +-
 zh-TW/part1/README.md                         | 695 ++++++++++++++++++
 zh-TW/part1/css-extract/README.md             |  61 ++
 zh-TW/part1/css-extract/package.json          |  24 +
 zh-TW/part1/css-extract/src/changeColor.js    |  10 +
 zh-TW/part1/css-extract/src/index.html        |  10 +
 zh-TW/part1/css-extract/src/index.js          |   2 +
 zh-TW/part1/css-extract/src/styles.css        |  19 +
 zh-TW/part1/css-extract/webpack.config.dev.js |  32 +
 .../part1/css-extract/webpack.config.prod.js  |  31 +
 zh-TW/part1/example1/README.md                |  81 ++
 zh-TW/part1/example1/package.json             |  21 +
 zh-TW/part1/example1/src/APIStuff.js          |   2 +
 zh-TW/part1/example1/src/UIStuff.js           |   4 +
 zh-TW/part1/example1/src/extraFile.js         |   1 +
 zh-TW/part1/example1/src/index.js             |   3 +
 zh-TW/part1/example1/src/styles.css           |   3 +
 zh-TW/part1/example1/webpack.config.js        |  24 +
 zh-TW/part1/example2/README.md                |  37 +
 zh-TW/part1/example2/package.json             |  12 +
 zh-TW/part1/example2/src/index.js             |   1 +
 zh-TW/part1/example2/webpack.config.js        |   9 +
 zh-TW/part1/example3/README.md                |  67 ++
 zh-TW/part1/example3/package.json             |  15 +
 zh-TW/part1/example3/src/index.js             |   1 +
 zh-TW/part1/example3/webpack.config.js        |  18 +
 zh-TW/part1/example4/README.md                |  70 ++
 zh-TW/part1/example4/package.json             |  15 +
 zh-TW/part1/example4/src/index.html           |   0
 zh-TW/part1/example4/src/index.js             |   1 +
 zh-TW/part1/example4/src/styles.css           |   0
 zh-TW/part1/example4/webpack.config.js        |  24 +
 zh-TW/part1/example5/README.md                | 111 +++
 zh-TW/part1/example5/package.json             |  16 +
 zh-TW/part1/example5/src/index.html           |  11 +
 zh-TW/part1/example5/src/index.js             |   1 +
 zh-TW/part1/example5/src/styles.css           |  19 +
 zh-TW/part1/example5/webpack.config.js        |  28 +
 zh-TW/part1/example6/README.md                | 136 ++++
 zh-TW/part1/example6/package.json             |  18 +
 zh-TW/part1/example6/src/index.html           |  11 +
 zh-TW/part1/example6/src/index.js             |   1 +
 zh-TW/part1/example6/src/styles.css           |  19 +
 zh-TW/part1/example6/webpack.config.dev.js    |  32 +
 zh-TW/part1/example6/webpack.config.prod.js   |  29 +
 zh-TW/part1/example7/README.md                |  41 ++
 zh-TW/part1/example7/package.json             |  23 +
 zh-TW/part1/example7/src/index.html           |  10 +
 zh-TW/part1/example7/src/index.js             |  16 +
 zh-TW/part1/example7/src/styles.css           |  19 +
 zh-TW/part1/example7/webpack.config.dev.js    |  32 +
 zh-TW/part1/example7/webpack.config.prod.js   |  29 +
 zh-TW/part1/html-reload/README.md             | 116 +++
 zh-TW/part1/html-reload/package.json          |  19 +
 zh-TW/part1/html-reload/src/index.html        |  10 +
 zh-TW/part1/html-reload/src/index.js          |   3 +
 zh-TW/part1/html-reload/src/styles.css        |  20 +
 zh-TW/part1/html-reload/webpack.config.dev.js |  35 +
 .../part1/html-reload/webpack.config.prod.js  |  32 +
 zh-TW/part2/README.md                         | 463 ++++++++++++
 zh-TW/part2/example1/.babelrc                 |   3 +
 zh-TW/part2/example1/.eslintrc                |  20 +
 zh-TW/part2/example1/package.json             |  32 +
 zh-TW/part2/example1/src/index.html           |  10 +
 zh-TW/part2/example1/src/index.js             |  15 +
 zh-TW/part2/example1/src/styles.css           |  19 +
 zh-TW/part2/example1/webpack.config.dev.js    |  38 +
 zh-TW/part2/example1/webpack.config.prod.js   |  38 +
 77 files changed, 3210 insertions(+), 298 deletions(-)
 create mode 100644 zh-TW/part1/README.md
 create mode 100644 zh-TW/part1/css-extract/README.md
 create mode 100644 zh-TW/part1/css-extract/package.json
 create mode 100644 zh-TW/part1/css-extract/src/changeColor.js
 create mode 100644 zh-TW/part1/css-extract/src/index.html
 create mode 100644 zh-TW/part1/css-extract/src/index.js
 create mode 100644 zh-TW/part1/css-extract/src/styles.css
 create mode 100644 zh-TW/part1/css-extract/webpack.config.dev.js
 create mode 100644 zh-TW/part1/css-extract/webpack.config.prod.js
 create mode 100644 zh-TW/part1/example1/README.md
 create mode 100644 zh-TW/part1/example1/package.json
 create mode 100644 zh-TW/part1/example1/src/APIStuff.js
 create mode 100644 zh-TW/part1/example1/src/UIStuff.js
 create mode 100644 zh-TW/part1/example1/src/extraFile.js
 create mode 100644 zh-TW/part1/example1/src/index.js
 create mode 100644 zh-TW/part1/example1/src/styles.css
 create mode 100644 zh-TW/part1/example1/webpack.config.js
 create mode 100644 zh-TW/part1/example2/README.md
 create mode 100644 zh-TW/part1/example2/package.json
 create mode 100644 zh-TW/part1/example2/src/index.js
 create mode 100644 zh-TW/part1/example2/webpack.config.js
 create mode 100644 zh-TW/part1/example3/README.md
 create mode 100644 zh-TW/part1/example3/package.json
 create mode 100644 zh-TW/part1/example3/src/index.js
 create mode 100644 zh-TW/part1/example3/webpack.config.js
 create mode 100644 zh-TW/part1/example4/README.md
 create mode 100644 zh-TW/part1/example4/package.json
 create mode 100644 zh-TW/part1/example4/src/index.html
 create mode 100644 zh-TW/part1/example4/src/index.js
 create mode 100644 zh-TW/part1/example4/src/styles.css
 create mode 100644 zh-TW/part1/example4/webpack.config.js
 create mode 100644 zh-TW/part1/example5/README.md
 create mode 100644 zh-TW/part1/example5/package.json
 create mode 100644 zh-TW/part1/example5/src/index.html
 create mode 100644 zh-TW/part1/example5/src/index.js
 create mode 100644 zh-TW/part1/example5/src/styles.css
 create mode 100644 zh-TW/part1/example5/webpack.config.js
 create mode 100644 zh-TW/part1/example6/README.md
 create mode 100644 zh-TW/part1/example6/package.json
 create mode 100644 zh-TW/part1/example6/src/index.html
 create mode 100644 zh-TW/part1/example6/src/index.js
 create mode 100644 zh-TW/part1/example6/src/styles.css
 create mode 100644 zh-TW/part1/example6/webpack.config.dev.js
 create mode 100644 zh-TW/part1/example6/webpack.config.prod.js
 create mode 100644 zh-TW/part1/example7/README.md
 create mode 100644 zh-TW/part1/example7/package.json
 create mode 100644 zh-TW/part1/example7/src/index.html
 create mode 100644 zh-TW/part1/example7/src/index.js
 create mode 100644 zh-TW/part1/example7/src/styles.css
 create mode 100644 zh-TW/part1/example7/webpack.config.dev.js
 create mode 100644 zh-TW/part1/example7/webpack.config.prod.js
 create mode 100644 zh-TW/part1/html-reload/README.md
 create mode 100644 zh-TW/part1/html-reload/package.json
 create mode 100644 zh-TW/part1/html-reload/src/index.html
 create mode 100644 zh-TW/part1/html-reload/src/index.js
 create mode 100644 zh-TW/part1/html-reload/src/styles.css
 create mode 100644 zh-TW/part1/html-reload/webpack.config.dev.js
 create mode 100644 zh-TW/part1/html-reload/webpack.config.prod.js
 create mode 100644 zh-TW/part2/README.md
 create mode 100644 zh-TW/part2/example1/.babelrc
 create mode 100644 zh-TW/part2/example1/.eslintrc
 create mode 100644 zh-TW/part2/example1/package.json
 create mode 100644 zh-TW/part2/example1/src/index.html
 create mode 100644 zh-TW/part2/example1/src/index.js
 create mode 100644 zh-TW/part2/example1/src/styles.css
 create mode 100644 zh-TW/part2/example1/webpack.config.dev.js
 create mode 100644 zh-TW/part2/example1/webpack.config.prod.js

diff --git a/part1/README.md b/part1/README.md
index b89869c..0ac096b 100644
--- a/part1/README.md
+++ b/part1/README.md
@@ -1,118 +1,133 @@
-# Webpack 初學者教學課程 Part 1 - Webpack 簡介 :zap:
+# Beginner Webpack Tutorial Part 1 - Introduction To Webpack :zap:
 
-對於像我這樣的人來說，第一次接觸到 webpack 是像是這些 repository：
+This is for the people like me whose first intro to webpack was a repository similar to:
 
 * https://github.com/davezuko/react-redux-starter-kit
 * https://github.com/webpack/react-starter
 
-雖然這些 repository 放在一起很棒，但它們不一定是最好的學習工具。
-像我的情況，我試著了解發生了那些事情，但還是很困惑，所以我決定不從這些大量而且分散的資源來理解。
+While these repositories are very well put together, they aren't necessarily the best learning tools.
+In my case, I got pretty confused trying to understand what was going on, and scrapped together my
+understanding from a lot of scattered resources.
 
-我希望這個教學課程可以讓 webpack 更容易的學習。
+I hope that this tutorial can make Webpack easy to learn.
 
-## 需求
+## Requirements
 
-至少，希望你了解基本的 node.js 和 npm。
+At the very least you are expected to know the basics of node.js and npm.
 
-## 貢獻
+## Contributing
 
-我很樂意接受任何所有的貢獻或是修正。如果你有任何問題，
-可以將這些問題發成 issue。如果我有錯誤的話，請將問題指出。最後，如果你覺得我漏了些什麼，或者可以將某些部分解釋的更好，留下一個 issue 或者是發送 Pull Request。
+I will gladly accept any and all contributions/corrections. If you have any questions,
+feel free to leave them as issues. If I made mistakes, please point them out. Finally, if you feel
+that I left anything out, or could have explained something better make sure to leave an issue or
+make a pull request.
 
-## 內容列表
+## Table of Contents
 
-* [為什麼要 Webpack？](#why-webpack)
-* [基礎](#the-basics)
-  * [安裝](#installation)
+* [Why Webpack?](#why-webpack)
+* [The Basics](#the-basics)
+  * [Installation](#installation)
   * [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)
+* [Your Config File](#your-config-file)
+  * [A Minimal Example](#a-minimal-example)
+  * [Introducing Plugins](#introducing-plugins)
+* [A More Complete Example](#a-more-complete-example)
+  * [Introducing Loaders](#introducing-loaders)
+  * [Adding More Plugins](#adding-more-plugins)
+  * [The Development Server](#the-development-server)
+  * [Start Coding](#start-coding)
+* [Conclusion](#conclusion)
+* [Closing Thoughts](#closing-thoughts)
 
-## 為什麼要 Webpack？
+## Why Webpack?
 
-因為每個 react 或 redux 教學課程都假設你知道什麼是 webpack。:cry:
+Because every single react/redux tutorial assumes you know it :cry:
 
-以下這些是更現實的原因，你可能需要使用 webpack。
+More realistically here are some reasons you would want to use webpack.
 
-你可以：
-  * Bundle 你的 js 檔案變成單一的檔案
-  * 在你的前端程式碼中使用 npm packages
-  * 撰寫 JavaScript ES6 或 ES7（需要透過 babel 來幫助）
-  * Minify 或優化程式碼
-  * 將 LESS 或 SCSS 轉換成 CSS
-  * 使用 HMR（Hot Module Replacement）
-  * 包含任何類型的檔案到你的 JavaScript
-  * 更多進階的東西，暫時不介紹
+Lets you:
+  * Bundle your js files into a single file
+  * Use npm packages in your frontend code
+  * Write ES6/ES7 JavaScript (with help from babel)
+  * Minify/Optimize code
+  * Turn LESS/SCSS into CSS
+  * Use HMR (Hot Module Replacement)
+  * Include any type of file into your JavaScript
+  * A lot more advanced stuff, which I won't cover
 
-##### 為什麼我需要這些功能？
+##### Why do I want these features?
 
-* Bundle JS 檔案 - 讓你可以撰寫模組化的 JavaScript，但是你不需要 inclue 每個 JavaScript `<script>` 的檔案（如果你需要多個 JavaScript 檔案可以透過設定來完成）。
+* Bundle JS files - Lets you write modular JavaScript, but you do not need to include a separate
+`<script>` tag for each JS file. (Configurable in case you do need more than one js file)
 
-* 在你的前端程式碼中使用 npm packages - npm 在 internet 上是一個大型的 open source 生態系統。有機會你可以儲存你的程式碼，然後到 npm 看一看，可能包含你想要的前端套件。
+* Use npm packages in your frontend code - npm is the biggest ecosystem of open source code on the
+internet. Chances are you can save writing code by taking a look at npm, and including the packages
+you want in your frontend.
 
-* ES6 和 ES7 - 加入一些 JavaScript 的新功能，讓撰寫程式碼可以更強大更容易，[請看這裡的介紹](https://github.com/DrkSephy/es6-cheatsheet)。
+* ES6/ES7 - Adds lots of features to JavaScript that makes it more powerful and easier to write.
+[Look here for an intro](https://github.com/DrkSephy/es6-cheatsheet).
 
-* Minify 或優化程式碼 - 減少你所分配的檔案大小，好處包括像是更快的將頁面載入。
+* Minify/Optimize Code - Reduces the size of file that you're distributing. Benefits include things
+like faster page loads.
 
-* 將 LESS 或 SCSS 轉換成 CSS - 更好的方式來撰寫 CSS，
-[如果你不熟悉的話，這裡有一些介紹](http://alistapart.com/article/why-sass)。
+* Turn LESS/SCSS into CSS - Nicer way to write CSS.
+[Here's an intro if you're unfamiliar](http://alistapart.com/article/why-sass).
 
-* 使用 HMR - 增加生產力。每當你儲存程式碼的時候，它可以注入到網頁，而不需將網頁刷新。如果當編輯你的程式碼，你需要維護頁面的狀態，這是非常方便的。
+* Use HMR - A boost to productivity. Every time you save your code, it gets injected into the page
+without requiring a full page refresh. This is really handy if you need to maintain the state of the
+page while you are editing your code.
 
-* 包含任何類型的檔案到你的 JavaScript - 減少對其他 build 工具的需要，必讓你可以透過程式的方式修改或使用這些檔案。
+* Include any type of file into your JavaScript - Reduces need for other build tools, and allows you
+to programmatically modify/use those files.
 
-## 基礎
+## The Basics
 
-### 安裝
+### Installation
 
-你需要全域安裝來使用 webpack 大部分的功能：
+To use most of the features of webpack you only need a global installation:
 
     npm install -g webpack
 
-然而 webpack 有些功能，像是優化的 plugins，需要你將它安裝在本機。像這種情況下你需要：
+However some features of webpack, such as optimization plugins, require you to have it installed
+locally. In which case you'll need to:
 
     npm install --save-dev webpack
 
-### 命令列
+### The Command Line
 
-如果要執行 webpack：
+To run webpack:
 
     webpack
 
-如果你想要在 webpack 每次 build 的時候查看改變的檔案：
+If you want webpack to build every time you change a file:
 
     webpack --watch
 
-如果你想要使用自訂的 webpack 設定檔：
+If you want to use a config file with webpack with a custom name:
 
     webpack --config myconfig.js
 
 ### Bundling
 
-[範例一](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example1)
+[Example 1](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example1)
 
 ![Official Dependency Tree](http://i.imgur.com/YU4xBPQ.png)
 
-Webpack 簡稱為模組整合工具。如果你想要深入的話，可以拜訪 [JavaScript Modules: A Beginner’s Guide](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.jw1txw6uh) 和 [JavaScript Modules Part 2: Module Bundling](https://medium.com/@preethikasireddy/javascript-modules-part-2-module-bundling-5020383cf306#.lfnspler2) 這兩篇優秀的解釋文章：
+Webpack is formally referred to as a module bundler. If you want an in-depth and accessible explanation
+on modules and module bundling definitely check out these two great articles:
+[here](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.jw1txw6uh)
+and [here](https://medium.com/@preethikasireddy/javascript-modules-part-2-module-bundling-5020383cf306#.lfnspler2).
+We're gonna keep it simple. The way that it works is that you specify a single file as your entry point.
+This file will be the root of your tree. Then every time you `require` a file from another file it's
+added to the tree. When you run `webpack`, all these files/modules are bundled into a single file.
 
-我們要保持它的簡單，webpack 運作的方式是透過指定一個單一檔案作為你的進入點。
-這個檔案會是 tree 的 root。然後你每次 `require` 一個檔案從其他檔案並把它加入到 tree。當你執行 `webpack`，所有的檔案和 module 都會被 bundle 成一個檔案。
-
-這裡是一個簡單的範例：
+Here's a simple example:
 
 ![Dependency Tree](http://i.imgur.com/dSghwwL.png)
 
-根據這樣的情況，你可以有這樣的目錄：
+Given this picture you could have the directory:
 
 ```
 MyDirectory
@@ -123,7 +138,7 @@ MyDirectory
 |- extraFile.js
 ```
 
-這些可能是你檔案的內容：
+and this could be the content of your files
 
 ```javascript
 // index.js
@@ -149,9 +164,10 @@ body {
 }
 ```
 
-當你執行 `webpack`，你會得到一個這個 tree 的 bundle 內容，雖然 `extraFile.js` 也是在相同的目錄中，但它不是被 bundle 的一部份，因為它在 `index.js` 沒有被 `require`。
+When you run `webpack`, you'll get a bundle with the contents of this tree, but `extraFile.js`,
+which was in the same directory, will not be part of the bundle because it was never `required`.
 
-`bundle.js` 看起來會像：
+`bundle.js` will look like:
 
 ```javascript
 // contents of styles.css
@@ -159,43 +175,50 @@ body {
 // contents of APIStuff.js + fetch
 ```
 
-被 bundle 的這些檔案是你明確所 require 進來的檔案。
+The things that are bundled are only the things that you explicitly required across your files.
 
 ### Loaders
 
-你可能會注意到，我在上方的範例做了一些奇怪的事情。我在 JavaScript 檔案中 `require` 一個 css 檔案。
+As you probably noticed, I did something strange in the above example. I `required` a css file in
+a JavaScript file.
 
-關於 webpack 真的很酷，有趣的事情是，你可以 `require` 更多不只是 JavaScript 的檔案。
+The really cool, and interesting thing about webpack is that you can `require` more than just
+JavaScript files.
 
-在 webpack 這些東西我們稱為 loader。使用這些 loader，你可以 `require` 任何 `.css` 和 `.html`  到 `.png` 檔。
+There is this thing in webpack called a loader. Using these loaders, you can
+`require` anything from `.css` and `.html` to `.png` files.
 
-例如在上圖我有：
+For example in the diagram above I had
 
 ```javascript
 // index.js
 require('./styles.css')
 ```
 
-如果我在我的 webpack 設定檔中，引入 [style-loader](https://github.com/webpack/style-loader) 和 [css-loader](https://github.com/webpack/css-loader)，這不是完全有效的，但是實際上還是會應用 CSS 到我的網頁。
+If I include [the style-loader](https://github.com/webpack/style-loader) and the [the css-loader](https://github.com/webpack/css-loader) in my webpack config, this is not only perfectly
+valid, but also will actually apply the CSS to my page.
 
-你可以在 webpack 使用多個 loader，這裡只是一個單一的例子。
+This is just a single example of the many loaders you can use with webpack.
 
 ### Plugins
 
-Plugin，顧名思義就是為 webpack 增加額外的功能。其中常使用到的一個 plugin 是 `UglifyJsPlugin`，它可以 minify 你的 JavaScript 程式碼。我們之後會介紹如何使用。
+Plugins, like the name suggests, add extra functionality to webpack. One frequently used plugin is
+the `UglifyJsPlugin`, which lets you minify your JavaScript code. We'll cover how to use this later.
 
-## 你的 webpack 設定檔案
+## Your Config File
 
-Webpack 沒辦法直接使用，需要透過你的需求來做設定。為了做到這一點，你需要建立一個檔案叫做：
+Webpack does not work out of the box so you need to tailor it to your needs. In order to do this you
+need to create a file called
 
     webpack.config.js
 
-預設情況下，webpack 會去識別這個檔名。如果你選擇使用不同的檔名，你需要加入 `--config` 來指定你的檔案名稱。
+as this is the name that webpack recognizes by default. If you choose to use a different name you
+would have to use the `--config` flag to specify the file's name.
 
-### 一個簡單的範例
-[範例二](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example2)
+### A Minimal Example
+[Example 2](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example2)
 
-你的目錄結構像是這樣：
+Say your directory structure looks like this:
 
 ```
 MyDirectory
@@ -206,14 +229,14 @@ MyDirectory
 
 ```
 
-然後這是一個非常簡易的 webpack 設定：
+Then a very minimal webpack config you can make is this
 
 ```javascript
 // webpack.config.js
 var path = require('path')
 
 module.exports = {
-  entry: ['./src/index'], // 在 index 檔案後的 .js 副檔名是可選的
+  entry: ['./src/index'], // file extension after index is optional for .js files
   output: {
     path: path.join(__dirname, 'dist'),
     filename: 'bundle.js'
@@ -221,27 +244,32 @@ module.exports = {
 }
 ```
 
-我們一個一個複習這些屬性：
+Going over the new properties one by one:
 
-* [entry](https://webpack.github.io/docs/configuration.html#entry) - 這是你的 bundle 的進入點，這是我們在討論 [bundling](#bundling) 的部分。`entry` 是一個陣列，根據你的需求，webpack 允許可以有多個進入點，來產生多個 bundle 檔案。
+* [entry](https://webpack.github.io/docs/configuration.html#entry) - The entrypoint of your bundle,
+which we discussed in the [bundling](#bundling) section. It's an array because webpack allows
+multiple entry points if you want to generate multiple bundles.
 
-* [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 檔案名稱。
+* [output](https://webpack.github.io/docs/configuration.html#output) - Dictates the form of the output by webpack
+  * [path](https://webpack.github.io/docs/configuration.html#output-path) - where to put the bundle
+  * [filename](https://webpack.github.io/docs/configuration.html#output-filename) - what to call the bundle
 
-當你執行 `webpack`，會在你的 dist 資料夾建立一個叫做 `bundle.js` 的檔案。
+When you run `webpack`, this will create a file called `bundle.js` in the dist folder.
 
-### 介紹 Plugins
+### Introducing Plugins
 
-[範例三](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example3)
+[Example 3](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example3)
 
-想像一下，你使用 webpack 將你的檔案 bundle 在一起，然後你意識到 bundle 後的結果是 900KB。這裡有個問題，但是你可以透過 minify 你的 bundle 檔案來做改善。如果需要做到這一點，你需要使用一個我在前面稍早提到的 [UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) plugin。
+Imagine that you've used webpack to bundle all your files together, and now you've realized that all
+together it's 900KB. This is a problem that can be ameliorated by minifying your bundle. To do this
+you need to use a plugin I mentioned earlier called the
+[UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin).
 
-此外，你需要在本機安裝 webpack 才能實際的去使用這個 plugin。
+Moreover you will need to have webpack installed locally to actually be able to use the plugin.
 
     npm install --save-dev webpack
 
-現在你可以 require webpack 並 minify 你的程式碼。
+Now you can require webpack and minify your code.
 
 ```javascript
 // webpack.config.js
@@ -264,18 +292,19 @@ module.exports = {
   ]
 }
 ```
-我們一個一個複習這些屬性：
+Going over the new properties one by one:
 
-* plugins - 一個可以儲存你的 plugin 的陣列。
-  * [webpack.optimize.UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) - Minify 你的程式碼，並顯示警告訊息。
+* plugins - An array that holds your plugins.
+  * [webpack.optimize.UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) - Minify your code, and suppress warning messages.
 
-這個時候，當我們執行 `webpack`，`UglifyJsPlugin` 通過像是移除所有空白的處理，可以將你的檔案減少至 200KB。
+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.
 
-你也可以加入 [OccurenceOrderPlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin)。
+You can also add the [OccurenceOrderPlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin)
 
-> 透過發生次數分配 module 和 chunk 的 id。一些常用的 Id 取得較低（短）的 id。這使得 id 可以預測，透過推薦來減少檔案的大小。
+> 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.
 
-老實說，我不太確定底層的機制是如何工作的，但在根據目前 [webpack2 beta 的預設情況下](https://gist.github.com/sokra/27b24881210b56bbaff7)，所以我將它包含在內。
+To be honest I'm not sure how the underlying mechanisms work, but in the current [webpack2 beta it's included by default](https://gist.github.com/sokra/27b24881210b56bbaff7) so I include it as well.
 
 ```JavaScript
 // webpack.config.js
@@ -299,13 +328,18 @@ module.exports = {
 }
 ```
 
-所以現在我們寫了一個設定檔讓我們可以 minify 和 bundle 我們的 JavaScript。這個 bundle 檔案可以被複製並貼到其他的專案目錄中，放入 `<script>` 就可以使用。如果*只有 JavaScript*，而且你只在乎關於 webpack 基本的使用，你可以直接跳到[結論](#conclusion)。
+So now we have written a config that allows us to minify and bundle our JavaScript. This bundle
+could be copied and pasted into another project's directory, and thrown into a `<script>` tag there.
+You can skip to the [conclusion](#conclusion) if you only care about the basics of using webpack
+with *only JavaScript*.
 
-## 一個更完整的範例
+## A More Complete Example
 
-此外，比起單單使用 JavaScript，使用 webpack 可以做的更多，你可以避免複製-貼上並透過 webpack 管理你的整個專案。
+Alternatively, because webpack can do more than just work with JavaScript, you can avoid the
+copy-pasting and manage your entire project with webpack.
 
-在下面的部份中，我們要使用 webpack 建立一個非常簡單的網站。如果你想要跟著這個範例，建立一個像下方的目錄結構：
+In the following section, we are going to create a very simple website using webpack. If you wish to
+follow along with the example, create a directory with the structure
 
 ```
 MyDirectory
@@ -318,22 +352,23 @@ MyDirectory
 |- webpack.config.js
 ```
 
-#### 內容
+#### Contents
 
-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. [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.
 
-#### 介紹 Loader
+#### Introducing Loaders
 
-[範例四](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example4)
+[Example 4](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example4)
 
-在稍早前面的教學課程中我提到了 [loaders](#loaders)。這些程式碼來幫助我們 require 非 JavaScript 的檔案。在這種情況下，我們將需要 `style-loader` 和 `css-loader`。首先我們需要安裝這些 loader：
+Earlier in the tutorial I mentioned [loaders](#loaders). These will help us require non-js files in
+our code. In this case, we will need the style loader and the css loader. First we need to install the loaders:
 
     npm install --save-dev style-loader css-loader
 
-現在安裝完後，我們可以調整我們的 webpack 設定來引入 `css-loader`：
+Now that it's installed we can tweak our config to include the css loader:
 
 ```javascript
 // webpack.config.js
@@ -363,16 +398,18 @@ module.exports = {
 }
 ```
 
-我們一個一個複習這些屬性：
+Going over the new properties one by one:
 
-* [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 （正規表達式）的檔案。
+* [module](http://webpack.github.io/docs/configuration.html#module) - Options affecting your files
+  * [loaders](http://webpack.github.io/docs/configuration.html#module-loaders) - An array of loaders that we specify for our application
+    * test - A regular expression to match the loader with a file
+    * loaders - Which loaders to use for files that match the test
 
-這個時候你執行 `webpack`，如果你 `require` 的檔案結尾是 `.css`，然會我們會使用 `style` 和 `css` loader，將 CSS 加入到 bundle。
+This time when you run `webpack`, if you `require` a file that ends in `.css`, then we will apply
+the `style` and `css` loaders to it, which adds the CSS to the bundle.
 
-如果我們沒有 loaders，我們會得到像是這樣的錯誤：
+If we didn't have the loaders,
+then we would get an error like this:
 
 ```
 ERROR in ./test.css
@@ -381,13 +418,13 @@ Line 1: Unexpected token {
 You may need an appropriate loader to handle this file type.
 ```
 
-**可選項目**
+**Optional**
 
-如果你想要使用 SCSS 而不是 CSS 你需要執行：
+If you want to use SCSS instead of CSS you would need to run:
 
     npm install --save-dev sass-loader node-sass webpack
 
-然後你的 loader 必須修改成：
+and instead your loader would be written as
 
 ```javascript
 {
@@ -396,23 +433,24 @@ You may need an appropriate loader to handle this file type.
 }
 ```
 
-處理 LESS 也類似於這個方式。
-
-要知道這些需要被指定的 loader 是有*順序*的，這是一個很重要部分。在上面的範例，`sass` loader 是第一個應用在你的 `.scss` 檔案，然後是 `css` loader，最後是 `style` loader。你可以看到，這些 loader 的應用模式是由右到左。
+The process is similar for LESS.
 
-#### 加入更多的 Plugin
+An important aspect to recognize is that there is an *order* to which these loaders need to be specified. In the above example, the `sass` loader is first applied to your `.scss` files, then the `css` loader, and finally the `style` loader. As you can see, the pattern is that these loaders are applied from right to left.
 
-[範例五](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example5)
+#### Adding More Plugins
 
-現在我們的網站有基礎的樣式，但我們還需要實際的網站樣式。
+[Example 5](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example5)
 
-我們通過 [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) 來做，它讓我們可以產生一個 HTML 頁面使用現有的。我們將使用一個目前現有的 `index.html`。
+Now that we have the infrastructure for styling our website we need an actual page to style.
+We'll be doing this through the
+[html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin),
+which lets us generate an HTML page or use an existing one. We'll use an existing one `index.html`.
 
-首先我們需要安裝 plugin：
+First we install the plugin:
 
     npm install --save-dev html-webpack-plugin@2
 
-然後在我們的 webpack 設定檔加入：
+Then we can add it to our config
 
 ```javascript
 // webpack.config.js
@@ -446,9 +484,12 @@ module.exports = {
 }
 ```
 
-這個時候當你執行 `webpack`，因為我們指定一個 `HtmlWebpackPlugin` 和 `./src/index.html` 的 template，它會產生一個檔案叫做 `index.html` 在我們的 `dist` 資料夾，而網頁的內容是 `./src/index.html`。
+This time, when you run `webpack`, because we specified an `HtmlWebpackPlugin` with a template of
+`./src/index.html`, it will generate a file called `index.html` in our `dist` folder with the
+contents of `./src/index.html`
 
-如果 `index.html` 作為 template 是空的也沒用。現在是個好時機我們可以填入一些元素進去。
+There's no point in using `index.html` as a template if it's empty. Now would be a good time to
+actually populate it.
 
 ```html
 <html>
@@ -463,9 +504,10 @@ module.exports = {
 </html>
 ```
 
-注意到我們沒有放入一個 `bundle.js` 的 `<script>` 標籤到我們的 HTML。實際上 plugin 會自動的幫你處理。如果你放入 script，到頭來你會載入兩次相同的程式碼。
+Note that we aren't putting a `<script>` tag into our HTML for `bundle.js`. The plugin will actually
+automatically do that for you. If you do put in the script tag, you'll end up loading your same code twice.
 
-而讓我們加入一些基本的樣式在 `styles.css`：
+and while we're at it let's add some basic styling in `styles.css`
 
 ```css
 h1 {
@@ -489,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
@@ -539,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
@@ -587,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
@@ -616,40 +671,51 @@ 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)
 
-大多數的人似乎會慌亂的原因是因為：webpack 事實上需要通過這些取得的進入點來撰寫 JavaScript；然而我們現在已經到達了這個教學課程最高潮的部分。
+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
+climax of our tutorial.
 
-如果你還沒準備好：執行 `npm run dev`，以及導到 `http://localhost:8080`。設定 dev server 不顯示 hot reload。在你每次儲存你專案所編輯的任何一個檔案部份時，瀏覽器將會重新載入來顯示你的修改。
+Just in case you haven't already: do `npm run dev`, and navigate to `http://localhost:8080`. Setting
+up that dev server with hot reloading wasn't for show. Every single time you save while editing
+any part of your project, the browser will reload to show your changes.
 
-我們也需要 npm package，為了來示範如何在前端使用它們。
+We are also going to require a npm package just to demonstrate how you can use them in your
+frontend now.
 
     npm install --save pleasejs
 
-PleaseJS 是一個隨機色彩的產生器，其中我們需要在按鈕中加入 hook 來改變我們的 div 顏色。
+PleaseJS is a random color generator, which we're going to hook up to our button to change the color
+of our div.
 
 ```javascript
 // index.js
 
-// 接受 hot module reloading
+// Accept hot module reloading
 if (module.hot) {
   module.hot.accept()
 }
 
-require('./styles.css') // 網頁現在有了樣式
+require('./styles.css') // The page is now styled
 var Please = require('pleasejs')
 var div = document.getElementById('color')
 var button = document.getElementById('button')
@@ -661,7 +727,8 @@ function changeColor() {
 button.addEventListener('click', changeColor)
 ```
 
-有趣的是，[為了讓 Hot Module Replacement 可以執行](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html#what-is-needed-to-use-it)，你需要加入下面的程式碼：
+Interestingly, [in order for Hot Module Replacement to work](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html#what-is-needed-to-use-it)
+You need to include the code:
 
 ```javascript
 if (module.hot) {
@@ -669,27 +736,32 @@ if (module.hot) {
 }
 ```
 
-在一個 module 或是它的父 module。
+in a module or a parent of that module.
 
-然後我們就完成了！
+and we're done!
 
-**備註：** 你可能已經注意到在你的 css 被使用之前有些 delay，或許事實上你討厭你的 css 在你的 JavaScript 檔案中。我留了另一個範例，[css-extract](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/css-extract)，描述如何將你的 CSS 放在不同的檔案。
+**Side Note:** You might have noticed a delay before your css was applied, or maybe you hate the
+fact that your css is in your javascript file. I've put aside an example,
+[css-extract](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/css-extract),
+that describes how to put your CSS in a different file.
 
-## 結論
+## Conclusion
 
-我希望這些是有幫助的。
+I hope this is helpful.
 
-Webpack 首先最重要的它是一個模組整合工具。它是一個相當模組化和有用的工具，事實上，它不是被限制在 ES6 和 React。
+Webpack first and foremost is a module bundler. It's an extremely modular and useful tool,
+which, in fact, is not chained to ES6 and React.
 
-現在考慮到
+Now given that
 
-* Part 2 將解決使用 Webpack 透過 Babel 將 ES6 轉換到 ES5。
-* Part 3 將解決使用 Webpack 和 React + Babel。
+* Part 2 will address using Webpack to transpile ES6 to ES5 with Babel
+* Part 3 will address using Webpack with React + Babel
 
-因為這是這常見的例子。
+Since those are the most common use cases.
 
-## 結束後的思考
+## Closing Thoughts
 
-恭喜！你已經讓你個按鈕去改變你的 div 的顏色！webpack 是不是很棒？
+Congratulations! You made a button that changes the color of a div! Isn't webpack great?
 
-沒錯是的；但是，如果你所做的事情只是讓按鈕去改變 div 的顏色，它可能不值得你去寫像是這樣的設定。如果你想這麼做的話，你可能會感到...疲累 :anguished:
+Yes it is; however, if all you're doing is making a button that changes the color of a div, it's
+probably not worth it writing a config like this. If you do, you might get...fatigued :anguished:
diff --git a/part1/css-extract/README.md b/part1/css-extract/README.md
index 2f6f6c6..91fcb70 100644
--- a/part1/css-extract/README.md
+++ b/part1/css-extract/README.md
@@ -1,10 +1,12 @@
-# 番外 - 提取你的 CSS
+# Extra - Extract Your CSS
 
-好了，你現在已經完成了，但是在 production 你不想要將你的 CSS 檔案放入到你的 JavaScript。為了這個目的，我們將會使用　[Extract Text Plugin](https://github.com/webpack/extract-text-webpack-plugin)。
+Ok so now you've finished, but in production you don't want your CSS file to be inline with your
+javascript. For this purpose we'll be using the
+[Extract Text Plugin](https://github.com/webpack/extract-text-webpack-plugin).
 
     npm install --save-dev extract-text-webpack-plugin
 
-我們需要改變我們的 webpack prod 設定檔案：
+And we make the necessary changes to our webpack prod config:
 
 ```javascript
 var path = require('path')
@@ -40,11 +42,14 @@ module.exports = {
 }
 ```
 
-這些修改來自[官方 repo](https://github.com/webpack/extract-text-webpack-plugin) README 的描述。如果你想要知道它是怎麼運作的，可以到官方相關文件做更深入的了解。
+These changes come straight from the README of the
+[official-repo](https://github.com/webpack/extract-text-webpack-plugin). Make sure to take a look if
+you want to know how it works more in depth.
 
-> 它在進入點將每個 require("style.css") chunk 成獨立的 css 輸出檔案。所以你的樣式不會在 JavaScript 內了，但是它會被分離到一個 css bundle 檔案（styles.css）。如果你的 stylesheet 很大，在 JavaScript bundle 時，stylesheet bundle 會被平行的載入，可以加快載入的速度。
+> It moves every require("style.css") in entry chunks into a separate css output file. So your styles are no longer inlined into the javascript, but separate in a css bundle file (styles.css). If your total stylesheet volume is big, it will be faster because the stylesheet bundle is loaded in parallel to the javascript bundle.
 
-如果現在你執行 `npm run build`，你的 CSS 會必獨立成一個檔案，有趣的是，它已經被引入到你的 `index.html` 了。
+Now if you do an `npm run build` using this config your CSS will be in a separate file, and
+interestingly, already included in your `index.html`.
 
 ```html
 <html>
@@ -55,7 +60,7 @@ module.exports = {
 <body>
   <h1>Very Website</h1>
   <section id="color"></section>
-  <button id="button">Such Button</button>
+  <button id="button">Such Button</button>  
 <script src="bundle.js"></script></body>
 </html>
 ```
diff --git a/part1/example1/README.md b/part1/example1/README.md
index 13b46db..9e88c0d 100644
--- a/part1/example1/README.md
+++ b/part1/example1/README.md
@@ -1,18 +1,20 @@
-# 範例一 - Bundle 和 Loader
+# Example 1 - Bundling and Loaders
 
 ![Official Dependency Tree](http://i.imgur.com/YU4xBPQ.png)
 
-Webpack 簡稱為模組的整合工具。如果你想要深入的話，可以拜訪「modules」和「module bundling definitely」這兩篇優秀的解釋文章：
-[JavaScript Modules: A Beginner’s Guide](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.jw1txw6uh)
-和 [JavaScript Modules Part 2: Module Bundling](https://medium.com/@preethikasireddy/javascript-modules-part-2-module-bundling-5020383cf306#.lfnspler2)。
-我們要保持它的簡單，webpack 運作的方式是透過指定一個單一檔案作為你的進入點。
-這個檔案會是 tree 的 root。然後你每次 `require` 一個檔案從其他檔案並把它加入到 tree。當你執行 `webpack`，所有的檔案和 module 都會被 bundle 成一個檔案。
+Webpack is formally referred to as a module bundler. If you want an in-depth and accessible explanation
+on modules and module bundling definitely check out these two great articles:
+[here](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.jw1txw6uh)
+and [here](https://medium.com/@preethikasireddy/javascript-modules-part-2-module-bundling-5020383cf306#.lfnspler2).
+We're gonna keep it simple. The way that it works is that you specify a single file as your entry point.
+This file will be the root of your tree. Then every time you `require` a file from another file it's
+added to the tree. When you run `webpack`, all these files/modules are bundled into a single file.
 
-這裡是一個簡單的範例：
+Here's a simple example:
 
 ![Dependency Tree](http://i.imgur.com/dSghwwL.png)
 
-根據這樣的情況，你可以有這樣的目錄：
+Given this picture you could have the directory:
 
 ```
 MyDirectory
@@ -23,7 +25,7 @@ MyDirectory
 |- extraFile.js
 ```
 
-這些可能是你檔案的內容：
+and this could be the content of your files
 
 ```javascript
 // index.js
@@ -49,9 +51,10 @@ body {
 }
 ```
 
-當你執行 `webpack`，你會得到一個這個 tree 的 bundle 內容，雖然 `extraFile.js` 也是在相同的目錄中，但它不是被 bundle 的一部份，因為它在 `index.js` 沒有被 `require`。
+When you run `webpack`, you'll get a bundle with the contents of this tree, but `extraFile.js`, which was in the same directory, will not be part of
+the bundle because it is not a part of the dependency tree:
 
-`bundle.js` 看起來會像：
+`bundle.js` will look like:
 
 ```javascript
 // contents of styles.css
@@ -59,23 +62,26 @@ body {
 // contents of APIStuff.js + fetch
 ```
 
-被 bundle 的這些檔案是你明確所 require 進來的檔案。
+The things that are bundled are only the things that you explicitly required across your files.
 
 ### Loaders
 
-你可能會注意到，我在上方的範例做了一些奇怪的事情。我在 JavaScript 檔案中 `require` 一個 css 檔案。
+As you probably noticed, I did something strange in the above example. I `required` a css file in a javascript file.
 
-關於 webpack 真的很酷，有趣的事情是，你可以 `require` 更多不只是 JavaScript 的檔案。
+The really cool and interesting thing about webpack is that you can `require` more than just
+javascript files.
 
-在 webpack 這些東西我們稱為 loader。使用這些 loader，你可以 `require` 任何 `.css` 和 `.html`  到 `.png` 檔。
+There is this thing in webpack called a loader. Using these loaders, you can
+`require` anything from `.css` and `.html` to `.png` files.
 
-例如在上圖我有：
+For example in the diagram above I had
 
 ```javascript
 // index.js
 require('./styles.css')
 ```
 
-如果我在我的 webpack 設定檔中，引入 [style-loader](https://github.com/webpack/style-loader) 和 [css-loader](https://github.com/webpack/css-loader)，這不是完全有效的，但是實際上還是會應用 CSS 到我的網頁。
+If I include [the style-loader](https://github.com/webpack/style-loader) and the [the css-loader](https://github.com/webpack/css-loader) in my webpack config, this is not only perfectly
+valid, but also will actually apply the CSS to my page.
 
-你可以在 webpack 使用多個 loader，這裡只是一個單一的例子。
+This is just a single example of the many loaders you can use with webpack.
diff --git a/part1/example2/README.md b/part1/example2/README.md
index d29f900..4df2a6b 100644
--- a/part1/example2/README.md
+++ b/part1/example2/README.md
@@ -1,6 +1,6 @@
-# 範例二 - 一個簡單的範例
+# Example 2 - A minimal example
 
-你的目錄結構像是這樣：
+Say your directory structure looks like this:
 
 ```
 MyDirectory
@@ -11,7 +11,7 @@ MyDirectory
 
 ```
 
-然後這是一個非常簡易的 webpack 設定：
+Then a very minimal webpack config you can make is this
 
 ```javascript
 // webpack.config.js
@@ -26,12 +26,12 @@ module.exports = {
 }
 ```
 
-我們一個一個複習這些屬性：
+Going over the new properties one by one:
 
-* [entry](https://webpack.github.io/docs/configuration.html#entry) - 這是你的 bundle 的進入點，這是我們在討論 [bundling](#bundling) 的部分。`entry` 是一個陣列，根據你的需求，webpack 允許可以有多個進入點，來產生多個 bundle 檔案。
+* [entry](https://webpack.github.io/docs/configuration.html#entry) - The entrypoint of your bundle, which we discussed in the [bundling](#bundling) section. It's an array because webpack allows multiple entry points if you want to generate multiple bundles.
 
-* [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 檔案名稱。
+* [output](https://webpack.github.io/docs/configuration.html#output) - Dictates the form of the output by webpack
+  * [path](https://webpack.github.io/docs/configuration.html#output-path) - where to put the bundle
+  * [filename](https://webpack.github.io/docs/configuration.html#output-filename) - what to call the bundle
 
-當你執行 `webpack`，會在你的 dist 資料夾建立一個叫做 `bundle.js` 的檔案。
+When you run `webpack`, this will create a file called `bundle.js` in the dist folder.
diff --git a/part1/example3/README.md b/part1/example3/README.md
index 9ebe84b..03338d7 100644
--- a/part1/example3/README.md
+++ b/part1/example3/README.md
@@ -1,12 +1,15 @@
-# 範例三 - 介紹 Plugins
+# Example 3 - Introducing Plugins
 
-想像一下，你使用 webpack 將你的檔案 bundle 在一起，然後你意識到 bundle 後的結果是 900KB。這裡有個問題，但是你可以透過 minify 你的 bundle 檔案來做改善。如果需要做到這一點，你需要使用一個我在前面稍早提到的 [UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) plugin。
+Imagine that you've used webpack to bundle all your files together, and now you've realized that all
+together it's 900KB. This is a problem that can be ameliorated by minifying your bundle. To do this
+you need to use a plugin I mentioned earlier called the
+[UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin).
 
-此外，你需要在本機安裝 webpack 才能實際的去使用這個 plugin。
+Moreover you will need to have webpack installed locally to actually be able to use the plugin.
 
     npm install --save-dev webpack
 
-現在你可以 require webpack 並 minify 你的程式碼。
+Now you can require webpack and minify your code.
 
 ```javascript
 // webpack.config.js
@@ -29,18 +32,19 @@ module.exports = {
   ]
 }
 ```
-我們一個一個複習這些屬性：
+Going over the new properties one by one:
 
-* plugins - 一個可以儲存你的 plugin 的陣列。
-  * [webpack.optimize.UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) - Minify 你的程式碼，並顯示警告訊息。
+* plugins - An array that holds your plugins.
+  * [webpack.optimize.UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) - Minify your code, and suppress warning messages.
 
-這個時候，當我們執行 `webpack`，`UglifyJsPlugin` 通過像是移除所有空白的處理，可以將你的檔案減少至 200KB。
+This time, when you run `webpack`, now that you have the `UglifyJsPlugin` this could reduce your
+imaginary 900KB file to 200KB by through processes such as removing all the whitespace.
 
-你也可以加入 [OccurenceOrderPlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin)。
+You can also add the [OrderOccurencePlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin)
 
-> 透過發生次數分配 module 和 chunk 的 id。一些常用的 Id 取得較低（短）的 id。這使得 id 可以預測，透過推薦來減少檔案的大小。
+> Assign the module and chunk ids by occurrence count. Ids that are used often get lower (shorter) ids. This make ids predictable, reduces to total file size and is recommended.
 
-老實說，我不太確定底層的機制是如何工作的，但在目前包含 [webpack2 beta 的預設情況下](https://gist.github.com/sokra/27b24881210b56bbaff7)，所以我將它包含在內。
+To be honest I'm not sure how the underlying mechanisms work, but in the current [webpack2 beta it's included by default](https://gist.github.com/sokra/27b24881210b56bbaff7) so I include it as well.
 
 ```javascript
 // webpack.config.js
@@ -64,4 +68,7 @@ module.exports = {
 }
 ```
 
-所以現在我們寫了一個設定檔讓我們可以 minify 和 bundle 我們的 JavaScript。這個 bundle 檔案可以被複製並貼到其他的專案目錄中，放入 `<script>` 就可以使用。如果*只有 JavaScript*，而且你只在乎關於 webpack 基本的使用，你可以直接跳到[結論](#conclusion)。
+So now we have written a config that allows us to minify and bundle our javascript. This bundle
+could be copied and pasted into another project's directory, and thrown into a `<script>` tag there.
+You can skip to the [conclusion](#conclusion) if you only care about the basics of using webpack
+with *only javascript*.
diff --git a/part1/example4/README.md b/part1/example4/README.md
index 110cbdb..5f7b7a7 100644
--- a/part1/example4/README.md
+++ b/part1/example4/README.md
@@ -1,8 +1,9 @@
-在稍早前面的教學中我提到了 [loaders](#loaders)。這些程式碼來幫助我們 require 非 JavaScript 的檔案。在這種情況下，我們將需要 `style-loader` 和 `css-loader`。首先我們需要安裝這些 loader：
+Earlier in the tutorial I mentioned [loaders](#loaders). These will help us require non-js files in
+our code. In this case, the only loader we will need is the css loader. First we need to install the loader:
 
     npm install --save-dev style-loader css-loader
 
-現在安裝完後，我們可以調整我們的 webpack 設定來引入 `css-loader`：
+Now that it's installed we can tweak our config to include the css loader:
 
 ```javascript
 // webpack.config.js
@@ -32,16 +33,18 @@ module.exports = {
 }
 ```
 
-我們一個一個複習這些屬性：
+Going over the new properties one by one:
 
-* [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 （正規表達式）的檔案。
+* [module](http://webpack.github.io/docs/configuration.html#module) - Options affecting your files
+  * [loaders](http://webpack.github.io/docs/configuration.html#module-loaders) - An array of loaders that we specify for our application
+    * test - A regular expression to match the loader with a file
+    * loaders - Which loaders to use for files that match the test
 
-這個時候你執行 `webpack`，如果你 `require` 的檔案結尾是 `.css`，然會我們會使用 `style` 和 `css` loader，將 CSS 加入到 bundle。
+This time when you run `webpack`, if we `require` a file that ends in `.css`, then we will apply
+the `style` and `css` loaders to it, which adds the CSS to the bundle.
 
-如果我們沒有 loaders，我們會得到像是這樣的錯誤：
+If we didn't have the loaders,
+then we would get an error like this:
 
 ```
 ERROR in ./test.css
@@ -50,13 +53,13 @@ Line 1: Unexpected token {
 You may need an appropriate loader to handle this file type.
 ```
 
-**可選項目**
+**Optional**
 
-如果你想要使用 SCSS 而不是 CSS 你需要執行：
+If you want to use SCSS instead of CSS you would need to run:
 
     npm install --save-dev sass-loader node-sass webpack
 
-然後你的 loader 必須修改成：
+and instead your loader would be written as
 
 ```javascript
 {
@@ -65,6 +68,6 @@ You may need an appropriate loader to handle this file type.
 }
 ```
 
-處理 LESS 也類似於這個方式。
+The process is similar for LESS.
 
-要知道這些需要被指定的 loader 是有*順序*的，這是一個很重要部分。在上面的範例，`sass` loader 是第一個應用在你的 `.scss` 檔案，然後是 `css` loader，最後是 `style` loader。你可以看到，這些 loader 的應用模式是由右到左。
+An important aspect to recognize is that there is an *order* to which these loaders need to be specified. In the above example, the `sass` loader is first applied to your `.scss` files, then the `css` loader, and finally the `style` loader. As you can see, the pattern is that these loaders are applied from right to left.
diff --git a/part1/example5/README.md b/part1/example5/README.md
index dbfcc85..70e95be 100644
--- a/part1/example5/README.md
+++ b/part1/example5/README.md
@@ -1,14 +1,15 @@
-# 範例五 - 加入更多的 Plugin
+# Example 5 - Adding More Plugins
 
-現在我們的網站有基礎的樣式，但我們還需要實際的網站樣式。
+Now that we have the infrastructure for styling our website we need an actual page to style.
+We'll be doing this through the
+[html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin),
+which lets us generate an HTML page or use an existing one. We'll use an existing one `index.html`.
 
-我們通過 [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) 來做，它讓我們可以產生一個 HTML 頁面使用現有的。我們將使用一個目前現有的 `index.html`。
-
-首先我們需要安裝 plugin：
+First we install the plugin:
 
     npm install --save-dev html-webpack-plugin@2
 
-然後在我們的 webpack 設定檔加入：
+Then we can add it to our config
 
 ```javascript
 // webpack.config.js
@@ -42,9 +43,12 @@ module.exports = {
 }
 ```
 
-這個時候當你執行 `webpack`，因為我們指定一個 `HtmlWebpackPlugin` 和 `./src/index.html` 的 template，它會產生一個檔案叫做 `index.html` 在我們的 `dist` 資料夾，而網頁的內容是 `./src/index.html`。
+This time, when you run `webpack`, because we specified an `HtmlWebpackPlugin` with a template of
+`./src/index.html`, it will generate a file called `index.html` in our `dist` folder with the
+contents of `./src/index.html`
 
-如果 `index.html` 作為 template 是空的也沒用。現在是個好時機我們可以填入一些元素進去。
+There's no point in using `index.html` as a template if it's empty. Now would be a good time to
+actually populate it.
 
 ```html
 <html>
@@ -60,9 +64,10 @@ module.exports = {
 </html>
 ```
 
-注意到我們沒有放入一個 `bundle.js` 的 `<script>` 標籤到我們的 HTML。實際上 plugin 會自動的幫你處理。如果你放入 script，到頭來你會載入兩次相同的程式碼。
+Note that we aren't putting a `<script>` tag into our HTML for `bundle.js`. The plugin will actually
+automatically do that for you. If you do put in the script tag, you'll end up loading your same code twice.
 
-而讓我們加入一些基本的樣式在 `styles.css`：
+and while we're at it let's add some basic styling in `styles.css`
 
 ```css
 h1 {
@@ -86,16 +91,21 @@ button {
 }
 ```
 
-#### 備註
+#### Side note
 
-我覺得我應該提到 `html-webpack-plugin` 需要謹慎使用。對我來說，如果你真的只是簡單的啟用一個 SPA，webpack 應該只產生 HTML 檔案。這裡只需要一個 HTML 檔案，我不會推薦它來產生 12 個 HTML 檔案，當作一個學習經驗。這意思不是說你不能使用 html 檔案之類的，像是 angular 指令，只需要 HTML template 檔案。在這個情況下你可以做類似像是：
+I feel like I should mention that the `html-webpack-plugin` should
+be used sparingly. To me, webpack should generate HTML files if you just have a really simple
+one to bootstrap a SPA. So while it was useful for the learning experience, which required only
+one HTML file, I wouldn't recommend it to generate 12 HTML files. This doesn't mean you can't use
+html files with something like angular directives, which require HTML template files. In that case
+you could do something like:
 
 ```javascript
 // ...directive stuff
-template: require('./templates/button.html') // 使用 raw loader
+template: require('./templates/button.html') // using raw loader
 ```
 
-相反的，它意味著你不應該做這樣的事情︰
+Instead, it means that you should not be doing something like this:
 
 ```javascript
 new HtmlWebpackPlugin
@@ -108,4 +118,4 @@ new HtmlWebpackPlugin({
 })
 ```
 
-如果我這個部份我搞錯了，請任何有這方面經驗的人隨時糾正我。
+Anyone with other experience feel free to correct me if I'm wrong.
diff --git a/part1/example6/README.md b/part1/example6/README.md
index 4d68840..49e68e0 100644
--- 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 reload 的功能並不是內建的，還需要一些其他的設定。
+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/part1/example7/README.md b/part1/example7/README.md
index 004fd7d..89590e0 100644
--- a/part1/example7/README.md
+++ b/part1/example7/README.md
@@ -1,24 +1,30 @@
-# 範例七 - 開始撰寫程式
+# Example 7 - Start Coding
 
-大多數的人會慌亂的原因似乎是因為：webpack 事實上需要通過這些取得的進入點來撰寫 JavaScript；然而我們現在已經到達了這個教學課程最高潮的部分。
+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
+climax of our tutorial.
 
-如果你還沒準備好：執行 `npm run dev`，以及導到 `http://localhost:8080`。設定 dev server 是不是可以 hot reload。在你每次儲存你專案所編輯的任何一個檔案部份時，瀏覽器將會重新載入來顯示你的修改。
+Just in case you haven't already: do `npm run dev`, and navigate to `http://localhost:8080`. Setting
+up that dev server with hot reloading wasn't for show. Every single time you save while editing
+any part of your project, the browser will reload to show your changes.
 
-我們也需要一個 npm package，為了來示範如何在前端使用它們。
+We are also going to require a npm package just to demonstrate how you can use them in your
+frontend now.
 
     npm install --save pleasejs
 
-PleaseJS 是一個隨機色彩的產生器，其中我們需要在按鈕中加入 hook 來改變我們的 div 顏色。
+PleaseJS is a random color generator, which we're going to hook up to our button to change the color
+of our div.
 
 ```javascript
 // index.js
 
-// 接受 hot module reloading
+// Accept hot module reloading
 if (module.hot) {
   module.hot.accept()
 }
 
-require('./styles.css') // 網頁現在有了樣式
+require('./styles.css') // The page is now styled
 var Please = require('pleasejs')
 var div = document.getElementById('color')
 var button = document.getElementById('button')
@@ -30,7 +36,8 @@ function changeColor() {
 button.addEventListener('click', changeColor)
 ```
 
-有趣的是，[為了讓 Hot Module Replacement 可以執行](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html#what-is-needed-to-use-it)，你需要加入下面的程式碼：
+Interestingly, [in order for Hot Module Replacement to work](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html#what-is-needed-to-use-it)
+You need to include the code:
 
 ```javascript
 if (module.hot) {
@@ -38,4 +45,4 @@ if (module.hot) {
 }
 ```
 
-在一個 module 或是它的父 module。
+in a module or a parent of that module.
diff --git a/part1/html-reload/README.md b/part1/html-reload/README.md
index be34c78..f1deaf5 100644
--- a/part1/html-reload/README.md
+++ b/part1/html-reload/README.md
@@ -1,17 +1,25 @@
-# 番外 - 讓你的 HTML 可以 hot reload
+# Extra - Make your HTML hot reload
 
-所以，當我測試的時候我才知道 `index.html` 不會被 hot reload！在之後搜尋的結果，我最後找到了[有幫助的答案](http://stackoverflow.com/questions/33183931/how-to-watch-index-html-using-webpack-dev-server-and-html-webpack-plugin)，
-這需要一個 [loader](https://github.com/webpack/raw-loader) 來讓我們 hacky，也需要另一個 [plugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin) 來防止這個 hacky 到 production。
+So while I was testing I realized that index.html would not hot reload! After searching for a bit
+I finally came across
+[this helpful answer](http://stackoverflow.com/questions/33183931/how-to-watch-index-html-using-webpack-dev-server-and-html-webpack-plugin),
+which will require
+[one more loader](https://github.com/webpack/raw-loader) to make our hacky solution come to life,
+and [one more plugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin) to prevent
+our hacky solution from going into production.
 
-基本上要讓 webpack 可以 hot reload 我們的 HTML，我們需要 require 我們其中檔案之一，讓它變成我們 dependency tree 的一部份。為了做到這一點，我們將會使用 `raw-loader` loader，它可以 pull 我們的 HTML 變成字串到我們的 JavaScript，但是另外我們真正需要做的是：加入 HTML 到 dependency tree。
+Basically to make Webpack hot reload our HTML we need to make it part of our dependency tree by
+requiring it in one of our files. In order to do this, we will be using the `raw-loader` loader,
+which pulls our HTML into javascript as a string, but additionally will do exactly what we need:
+add the HTML to the dependency tree.
 
-所以讓我們加入這個 loader 到我們的 dev 設定檔：
+So lets add the loader to our dev config:
 
-首先我們需要安裝：
+First we install with
 
     npm install --save-dev raw-loader
 
-然我們加入：
+Then we can add it:
 
 ```javascript
 // webpack.config.dev.js
@@ -42,7 +50,7 @@ module.exports = {
       loaders: ['style', 'css']
     }, {
       test: /\.html$/,
-      loader: "raw-loader" // loaders: ['raw-loader']，這個方式也是可以被接受的。
+      loader: "raw-loader" // loaders: ['raw-loader'] is also perfectly acceptable.
     }]
   },
   devServer: {
@@ -52,22 +60,29 @@ module.exports = {
 }
 ```
 
-這個時候當你執行 `webpack`，如果們 `require` 一個檔案它的附檔名是 `.html`，然後我們將使用 `raw-loader` loader ，其中加入 HTML 到 bundle。
+This time, when you run `webpack`, if we `require` a file that ends in `.html`, then we will apply
+the `raw-loader` loader to it, which adds the HTML to the bundle.
 
-現在我們目前空的 `index.js` 檔案我們可以這麼做。
+Now in our currently empty `index.js` file we can do.
 
 ```javascript
 // index.js
 require('./index.html')
 ```
 
-如果你現在要檢查 hot reload 是否可以執行，但是你必須要知道我們只是 require `index.html` 到我們的 `index.js`，這麼做絕對與 hot reload 無關。我們不想要在 production 使用 hot reload，這就是為什麼我們要使用 [DefinePlugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin)。
+If you were to check now, hot reloading should be working, but also you should realize we just
+required `index.html` in our `index.js`, and then did absolutely nothing with it. We don't want
+to do that in production, which is why we will be using the handy dandy
+[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')`。為什麼要 `JSON.stringify`？根據文件的解釋：
+The plugin lets us create a global constant for our entire bundle, which we could name anything,
+such as `DONT_USE_IN_PRODUCTION: true`, but more practically, a popular choice that looks a bit more
+familiar is `process.env.NODE_ENV: JSON.stringify('production')`. Why JSON.stringify? Because
+according to the docs:
 
-> 如果值是一個字串，它會被作為一個程式碼片段。
+> If the value is a string it will be used as a code fragment.
 
-現在我們已經了解了，我們可以加入這個 plugin 到我們的 production 設定檔：
+Now that we know that, we'll be adding this plugin to our production config:
 
 ```javascript
 // webpack.config.prod.js
@@ -105,7 +120,7 @@ module.exports = {
 }
 ```
 
-並在我們的 `index.js` 加入一個條件判斷：
+and in our `index.js` we will add a condition
 
 ```javascript
 if (process.env.NODE_ENV !== 'production') {
@@ -113,4 +128,5 @@ if (process.env.NODE_ENV !== 'production') {
 }
 ```
 
-解決問題啦。在 production build 中，我們不需要 `index.html` 做為 dependency tree 的一部份，我們不需要 `index.html`，這也意味著我們不需要 `raw-loader`。
+Phew problem solved. In a production build, when we don't need the `index.html` as part of the
+dependency tree, we won't require `index.html`, which also means we don't need the `raw-loader`.
diff --git a/zh-TW/part1/README.md b/zh-TW/part1/README.md
new file mode 100644
index 0000000..b89869c
--- /dev/null
+++ b/zh-TW/part1/README.md
@@ -0,0 +1,695 @@
+# Webpack 初學者教學課程 Part 1 - Webpack 簡介 :zap:
+
+對於像我這樣的人來說，第一次接觸到 webpack 是像是這些 repository：
+
+* https://github.com/davezuko/react-redux-starter-kit
+* https://github.com/webpack/react-starter
+
+雖然這些 repository 放在一起很棒，但它們不一定是最好的學習工具。
+像我的情況，我試著了解發生了那些事情，但還是很困惑，所以我決定不從這些大量而且分散的資源來理解。
+
+我希望這個教學課程可以讓 webpack 更容易的學習。
+
+## 需求
+
+至少，希望你了解基本的 node.js 和 npm。
+
+## 貢獻
+
+我很樂意接受任何所有的貢獻或是修正。如果你有任何問題，
+可以將這些問題發成 issue。如果我有錯誤的話，請將問題指出。最後，如果你覺得我漏了些什麼，或者可以將某些部分解釋的更好，留下一個 issue 或者是發送 Pull Request。
+
+## 內容列表
+
+* [為什麼要 Webpack？](#why-webpack)
+* [基礎](#the-basics)
+  * [安裝](#installation)
+  * [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)
+
+## 為什麼要 Webpack？
+
+因為每個 react 或 redux 教學課程都假設你知道什麼是 webpack。:cry:
+
+以下這些是更現實的原因，你可能需要使用 webpack。
+
+你可以：
+  * Bundle 你的 js 檔案變成單一的檔案
+  * 在你的前端程式碼中使用 npm packages
+  * 撰寫 JavaScript ES6 或 ES7（需要透過 babel 來幫助）
+  * Minify 或優化程式碼
+  * 將 LESS 或 SCSS 轉換成 CSS
+  * 使用 HMR（Hot Module Replacement）
+  * 包含任何類型的檔案到你的 JavaScript
+  * 更多進階的東西，暫時不介紹
+
+##### 為什麼我需要這些功能？
+
+* Bundle JS 檔案 - 讓你可以撰寫模組化的 JavaScript，但是你不需要 inclue 每個 JavaScript `<script>` 的檔案（如果你需要多個 JavaScript 檔案可以透過設定來完成）。
+
+* 在你的前端程式碼中使用 npm packages - npm 在 internet 上是一個大型的 open source 生態系統。有機會你可以儲存你的程式碼，然後到 npm 看一看，可能包含你想要的前端套件。
+
+* ES6 和 ES7 - 加入一些 JavaScript 的新功能，讓撰寫程式碼可以更強大更容易，[請看這裡的介紹](https://github.com/DrkSephy/es6-cheatsheet)。
+
+* Minify 或優化程式碼 - 減少你所分配的檔案大小，好處包括像是更快的將頁面載入。
+
+* 將 LESS 或 SCSS 轉換成 CSS - 更好的方式來撰寫 CSS，
+[如果你不熟悉的話，這裡有一些介紹](http://alistapart.com/article/why-sass)。
+
+* 使用 HMR - 增加生產力。每當你儲存程式碼的時候，它可以注入到網頁，而不需將網頁刷新。如果當編輯你的程式碼，你需要維護頁面的狀態，這是非常方便的。
+
+* 包含任何類型的檔案到你的 JavaScript - 減少對其他 build 工具的需要，必讓你可以透過程式的方式修改或使用這些檔案。
+
+## 基礎
+
+### 安裝
+
+你需要全域安裝來使用 webpack 大部分的功能：
+
+    npm install -g webpack
+
+然而 webpack 有些功能，像是優化的 plugins，需要你將它安裝在本機。像這種情況下你需要：
+
+    npm install --save-dev webpack
+
+### 命令列
+
+如果要執行 webpack：
+
+    webpack
+
+如果你想要在 webpack 每次 build 的時候查看改變的檔案：
+
+    webpack --watch
+
+如果你想要使用自訂的 webpack 設定檔：
+
+    webpack --config myconfig.js
+
+### Bundling
+
+[範例一](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example1)
+
+![Official Dependency Tree](http://i.imgur.com/YU4xBPQ.png)
+
+Webpack 簡稱為模組整合工具。如果你想要深入的話，可以拜訪 [JavaScript Modules: A Beginner’s Guide](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.jw1txw6uh) 和 [JavaScript Modules Part 2: Module Bundling](https://medium.com/@preethikasireddy/javascript-modules-part-2-module-bundling-5020383cf306#.lfnspler2) 這兩篇優秀的解釋文章：
+
+我們要保持它的簡單，webpack 運作的方式是透過指定一個單一檔案作為你的進入點。
+這個檔案會是 tree 的 root。然後你每次 `require` 一個檔案從其他檔案並把它加入到 tree。當你執行 `webpack`，所有的檔案和 module 都會被 bundle 成一個檔案。
+
+這裡是一個簡單的範例：
+
+![Dependency Tree](http://i.imgur.com/dSghwwL.png)
+
+根據這樣的情況，你可以有這樣的目錄：
+
+```
+MyDirectory
+|- index.js
+|- UIStuff.js
+|- APIStuff.js
+|- styles.css
+|- extraFile.js
+```
+
+這些可能是你檔案的內容：
+
+```javascript
+// index.js
+require('./styles.css')
+require('./UIStuff.js')
+require('./APIStuff.js')
+
+// UIStuff.js
+var React = require('React')
+React.createClass({
+  // stuff
+})
+
+// APIStuff.js
+var fetch = require('fetch') // fetch polyfill
+fetch('https://google.com')
+```
+
+```css
+/* styles.css */
+body {
+  background-color: rgb(200, 56, 97);
+}
+```
+
+當你執行 `webpack`，你會得到一個這個 tree 的 bundle 內容，雖然 `extraFile.js` 也是在相同的目錄中，但它不是被 bundle 的一部份，因為它在 `index.js` 沒有被 `require`。
+
+`bundle.js` 看起來會像：
+
+```javascript
+// contents of styles.css
+// contents of UIStuff.js + React
+// contents of APIStuff.js + fetch
+```
+
+被 bundle 的這些檔案是你明確所 require 進來的檔案。
+
+### Loaders
+
+你可能會注意到，我在上方的範例做了一些奇怪的事情。我在 JavaScript 檔案中 `require` 一個 css 檔案。
+
+關於 webpack 真的很酷，有趣的事情是，你可以 `require` 更多不只是 JavaScript 的檔案。
+
+在 webpack 這些東西我們稱為 loader。使用這些 loader，你可以 `require` 任何 `.css` 和 `.html`  到 `.png` 檔。
+
+例如在上圖我有：
+
+```javascript
+// index.js
+require('./styles.css')
+```
+
+如果我在我的 webpack 設定檔中，引入 [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 程式碼。我們之後會介紹如何使用。
+
+## 你的 webpack 設定檔案
+
+Webpack 沒辦法直接使用，需要透過你的需求來做設定。為了做到這一點，你需要建立一個檔案叫做：
+
+    webpack.config.js
+
+預設情況下，webpack 會去識別這個檔名。如果你選擇使用不同的檔名，你需要加入 `--config` 來指定你的檔案名稱。
+
+### 一個簡單的範例
+[範例二](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example2)
+
+你的目錄結構像是這樣：
+
+```
+MyDirectory
+|- dist
+|- src
+   |- index.js
+|- webpack.config.js
+
+```
+
+然後這是一個非常簡易的 webpack 設定：
+
+```javascript
+// webpack.config.js
+var path = require('path')
+
+module.exports = {
+  entry: ['./src/index'], // 在 index 檔案後的 .js 副檔名是可選的
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  }
+}
+```
+
+我們一個一個複習這些屬性：
+
+* [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 檔案位置。
+  * [filename](https://webpack.github.io/docs/configuration.html#output-filename) - bundle 檔案名稱。
+
+當你執行 `webpack`，會在你的 dist 資料夾建立一個叫做 `bundle.js` 的檔案。
+
+### 介紹 Plugins
+
+[範例三](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example3)
+
+想像一下，你使用 webpack 將你的檔案 bundle 在一起，然後你意識到 bundle 後的結果是 900KB。這裡有個問題，但是你可以透過 minify 你的 bundle 檔案來做改善。如果需要做到這一點，你需要使用一個我在前面稍早提到的 [UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) plugin。
+
+此外，你需要在本機安裝 webpack 才能實際的去使用這個 plugin。
+
+    npm install --save-dev webpack
+
+現在你可以 require webpack 並 minify 你的程式碼。
+
+```javascript
+// webpack.config.js
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    })
+  ]
+}
+```
+我們一個一個複習這些屬性：
+
+* plugins - 一個可以儲存你的 plugin 的陣列。
+  * [webpack.optimize.UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) - Minify 你的程式碼，並顯示警告訊息。
+
+這個時候，當我們執行 `webpack`，`UglifyJsPlugin` 通過像是移除所有空白的處理，可以將你的檔案減少至 200KB。
+
+你也可以加入 [OccurenceOrderPlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin)。
+
+> 透過發生次數分配 module 和 chunk 的 id。一些常用的 Id 取得較低（短）的 id。這使得 id 可以預測，透過推薦來減少檔案的大小。
+
+老實說，我不太確定底層的機制是如何工作的，但在根據目前 [webpack2 beta 的預設情況下](https://gist.github.com/sokra/27b24881210b56bbaff7)，所以我將它包含在內。
+
+```JavaScript
+// webpack.config.js
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    }),
+    new webpack.optimize.OccurenceOrderPlugin()
+  ]
+}
+```
+
+所以現在我們寫了一個設定檔讓我們可以 minify 和 bundle 我們的 JavaScript。這個 bundle 檔案可以被複製並貼到其他的專案目錄中，放入 `<script>` 就可以使用。如果*只有 JavaScript*，而且你只在乎關於 webpack 基本的使用，你可以直接跳到[結論](#conclusion)。
+
+## 一個更完整的範例
+
+此外，比起單單使用 JavaScript，使用 webpack 可以做的更多，你可以避免複製-貼上並透過 webpack 管理你的整個專案。
+
+在下面的部份中，我們要使用 webpack 建立一個非常簡單的網站。如果你想要跟著這個範例，建立一個像下方的目錄結構：
+
+```
+MyDirectory
+|- dist
+|- src
+   |- index.js
+   |- index.html
+   |- styles.css
+|- package.json
+|- webpack.config.js
+```
+
+#### 內容
+
+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。
+
+#### 介紹 Loader
+
+[範例四](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example4)
+
+在稍早前面的教學課程中我提到了 [loaders](#loaders)。這些程式碼來幫助我們 require 非 JavaScript 的檔案。在這種情況下，我們將需要 `style-loader` 和 `css-loader`。首先我們需要安裝這些 loader：
+
+    npm install --save-dev style-loader css-loader
+
+現在安裝完後，我們可以調整我們的 webpack 設定來引入 `css-loader`：
+
+```javascript
+// webpack.config.js
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    }),
+    new webpack.optimize.OccurenceOrderPlugin()
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }]
+  }
+}
+```
+
+我們一個一個複習這些屬性：
+
+* [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 （正規表達式）的檔案。
+
+這個時候你執行 `webpack`，如果你 `require` 的檔案結尾是 `.css`，然會我們會使用 `style` 和 `css` loader，將 CSS 加入到 bundle。
+
+如果我們沒有 loaders，我們會得到像是這樣的錯誤：
+
+```
+ERROR in ./test.css
+Module parse failed: /Users/Developer/workspace/tutorials/webpack/part1/example1/test.css
+Line 1: Unexpected token {
+You may need an appropriate loader to handle this file type.
+```
+
+**可選項目**
+
+如果你想要使用 SCSS 而不是 CSS 你需要執行：
+
+    npm install --save-dev sass-loader node-sass webpack
+
+然後你的 loader 必須修改成：
+
+```javascript
+{
+  test: /\.scss$/,
+  loaders: ["style", "css", "sass"]
+}
+```
+
+處理 LESS 也類似於這個方式。
+
+要知道這些需要被指定的 loader 是有*順序*的，這是一個很重要部分。在上面的範例，`sass` loader 是第一個應用在你的 `.scss` 檔案，然後是 `css` loader，最後是 `style` loader。你可以看到，這些 loader 的應用模式是由右到左。
+
+#### 加入更多的 Plugin
+
+[範例五](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example5)
+
+現在我們的網站有基礎的樣式，但我們還需要實際的網站樣式。
+
+我們通過 [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) 來做，它讓我們可以產生一個 HTML 頁面使用現有的。我們將使用一個目前現有的 `index.html`。
+
+首先我們需要安裝 plugin：
+
+    npm install --save-dev html-webpack-plugin@2
+
+然後在我們的 webpack 設定檔加入：
+
+```javascript
+// webpack.config.js
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    }),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }]
+  }
+}
+```
+
+這個時候當你執行 `webpack`，因為我們指定一個 `HtmlWebpackPlugin` 和 `./src/index.html` 的 template，它會產生一個檔案叫做 `index.html` 在我們的 `dist` 資料夾，而網頁的內容是 `./src/index.html`。
+
+如果 `index.html` 作為 template 是空的也沒用。現在是個好時機我們可以填入一些元素進去。
+
+```html
+<html>
+<head>
+  <title>Webpack Tutorial</title>
+</head>
+<body>
+  <h1>Very Website</h1>
+  <section id="color"></section>
+  <button id="button">Such Button</button>
+</body>
+</html>
+```
+
+注意到我們沒有放入一個 `bundle.js` 的 `<script>` 標籤到我們的 HTML。實際上 plugin 會自動的幫你處理。如果你放入 script，到頭來你會載入兩次相同的程式碼。
+
+而讓我們加入一些基本的樣式在 `styles.css`：
+
+```css
+h1 {
+  color: rgb(114, 191, 190);
+  text-align: center;
+}
+
+#color {
+  width: 300px;
+  height: 300px;
+  margin: 0 auto;
+}
+
+button {
+  cursor: pointer;
+  display: block;
+  width: 100px;
+  outline: 0;
+  border: 0;
+  margin: 20px auto;
+}
+```
+
+#### 開發伺服器
+
+[範例六](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example6)
+
+現在我們想要實際在瀏覽器看到我們的網站，需要一個 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`。
+
+```javascript
+// webpack.config.dev.js
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  devtool: 'cheap-eval-source-map',
+  entry: [
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/dev-server',
+    './src/index'
+  ],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }]
+  },
+  devServer: {
+    contentBase: './dist',
+    hot: true
+  }
+}
+```
+
+
+**修改**
+
+1. dev 設定檔省略了優化，當你不斷的 rebuild 時，他們不是必要的。所以不需要 `webpack.optimize` plugins。
+
+2. dev 設定檔需要對 dev server 做必要的設定，你可以到[這裡](https://webpack.github.io/docs/webpack-dev-server.html)了解更多。
+
+總結：
+
+* entry: 兩個新的進入點將伺服器連結到瀏覽器，方便 HMR。
+* devServer
+  * contentBase: 服務的檔案來自哪裡。
+  * hot: 啟用 HMR。
+
+prod 設定檔不需要改變太多：
+
+```javascript
+// webpack.config.prod.js
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  devtool: 'source-map',
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    }),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }]
+  }
+}
+```
+
+我也加入一個全新的屬性在 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`。
+
+如果要執行 dev server，我們可以執行：
+
+    webpack-dev-server --config webpack.config.dev.js
+
+如果我們要 build production 的程式碼，我們可以執行：
+
+    webpack --config webpack.config.prod.js
+
+
+如果想要讓這些指令使用的更容易，我們可以到 `package.json` 來設定簡單的 script。
+
+我們加入 `scripts` 屬性到設定檔：
+
+```javascript
+// package.json
+{
+  //...
+  "scripts": {
+    "build": "webpack --config webpack.config.prod.js",
+    "dev"  : "webpack-dev-server --config webpack.config.dev.js"
+  }
+  //...
+}
+```
+
+我們可以執行這些指令：
+
+```
+npm run build
+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 設定檔選項的有用資訊，我推薦你可以看一下，但是我把它分開了，因為我覺得會因為這個不太重要的原因，這會延長這個教學課程。
+
+#### 開始撰寫程式
+
+[範例七](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example7)
+
+大多數的人似乎會慌亂的原因是因為：webpack 事實上需要通過這些取得的進入點來撰寫 JavaScript；然而我們現在已經到達了這個教學課程最高潮的部分。
+
+如果你還沒準備好：執行 `npm run dev`，以及導到 `http://localhost:8080`。設定 dev server 不顯示 hot reload。在你每次儲存你專案所編輯的任何一個檔案部份時，瀏覽器將會重新載入來顯示你的修改。
+
+我們也需要 npm package，為了來示範如何在前端使用它們。
+
+    npm install --save pleasejs
+
+PleaseJS 是一個隨機色彩的產生器，其中我們需要在按鈕中加入 hook 來改變我們的 div 顏色。
+
+```javascript
+// index.js
+
+// 接受 hot module reloading
+if (module.hot) {
+  module.hot.accept()
+}
+
+require('./styles.css') // 網頁現在有了樣式
+var Please = require('pleasejs')
+var div = document.getElementById('color')
+var button = document.getElementById('button')
+
+function changeColor() {
+  div.style.backgroundColor = Please.make_color()
+}
+
+button.addEventListener('click', changeColor)
+```
+
+有趣的是，[為了讓 Hot Module Replacement 可以執行](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html#what-is-needed-to-use-it)，你需要加入下面的程式碼：
+
+```javascript
+if (module.hot) {
+  module.hot.accept()
+}
+```
+
+在一個 module 或是它的父 module。
+
+然後我們就完成了！
+
+**備註：** 你可能已經注意到在你的 css 被使用之前有些 delay，或許事實上你討厭你的 css 在你的 JavaScript 檔案中。我留了另一個範例，[css-extract](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/css-extract)，描述如何將你的 CSS 放在不同的檔案。
+
+## 結論
+
+我希望這些是有幫助的。
+
+Webpack 首先最重要的它是一個模組整合工具。它是一個相當模組化和有用的工具，事實上，它不是被限制在 ES6 和 React。
+
+現在考慮到
+
+* Part 2 將解決使用 Webpack 透過 Babel 將 ES6 轉換到 ES5。
+* Part 3 將解決使用 Webpack 和 React + Babel。
+
+因為這是這常見的例子。
+
+## 結束後的思考
+
+恭喜！你已經讓你個按鈕去改變你的 div 的顏色！webpack 是不是很棒？
+
+沒錯是的；但是，如果你所做的事情只是讓按鈕去改變 div 的顏色，它可能不值得你去寫像是這樣的設定。如果你想這麼做的話，你可能會感到...疲累 :anguished:
diff --git a/zh-TW/part1/css-extract/README.md b/zh-TW/part1/css-extract/README.md
new file mode 100644
index 0000000..2f6f6c6
--- /dev/null
+++ b/zh-TW/part1/css-extract/README.md
@@ -0,0 +1,61 @@
+# 番外 - 提取你的 CSS
+
+好了，你現在已經完成了，但是在 production 你不想要將你的 CSS 檔案放入到你的 JavaScript。為了這個目的，我們將會使用　[Extract Text Plugin](https://github.com/webpack/extract-text-webpack-plugin)。
+
+    npm install --save-dev extract-text-webpack-plugin
+
+我們需要改變我們的 webpack prod 設定檔案：
+
+```javascript
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+module.exports = {
+  devtool: 'source-map',
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    }),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    }),
+    new ExtractTextPlugin("styles.css")
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loader: ExtractTextPlugin.extract("style-loader", "css-loader")
+    }]
+  }
+}
+```
+
+這些修改來自[官方 repo](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` 了。
+
+```html
+<html>
+<head>
+  <title>Webpack Tutorial</title>
+<link href="styles.css" rel="stylesheet"> <------ MAGICALLY ADDED
+</head>
+<body>
+  <h1>Very Website</h1>
+  <section id="color"></section>
+  <button id="button">Such Button</button>
+<script src="bundle.js"></script></body>
+</html>
+```
diff --git a/zh-TW/part1/css-extract/package.json b/zh-TW/part1/css-extract/package.json
new file mode 100644
index 0000000..62c1bbf
--- /dev/null
+++ b/zh-TW/part1/css-extract/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "css-extract",
+  "version": "1.0.0",
+  "description": "",
+  "main": "webpack.config.js",
+  "scripts": {
+    "build": "webpack --config webpack.config.prod.js",
+    "dev": "webpack-dev-server --config webpack.config.dev.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "css-loader": "^0.23.1",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "html-webpack-plugin": "^2.8.1",
+    "style-loader": "^0.13.0",
+    "webpack": "^1.12.13",
+    "webpack-dev-server": "^1.14.1"
+  },
+  "dependencies": {
+    "pleasejs": "^0.4.2"
+  }
+}
diff --git a/zh-TW/part1/css-extract/src/changeColor.js b/zh-TW/part1/css-extract/src/changeColor.js
new file mode 100644
index 0000000..021d194
--- /dev/null
+++ b/zh-TW/part1/css-extract/src/changeColor.js
@@ -0,0 +1,10 @@
+var Please = require('pleasejs')
+var div = document.getElementById('color')
+var button = document.getElementById('button')
+
+function changeColor() {
+  div.style.backgroundColor = Please.make_color()
+  console.log('pls do work')
+}
+
+button.addEventListener('click', changeColor)
diff --git a/zh-TW/part1/css-extract/src/index.html b/zh-TW/part1/css-extract/src/index.html
new file mode 100644
index 0000000..55fff75
--- /dev/null
+++ b/zh-TW/part1/css-extract/src/index.html
@@ -0,0 +1,10 @@
+<html>
+<head>
+  <title>Webpack Tutorial</title>
+</head>
+<body>
+  <h1>Very Website</h1>
+  <section id="color"></section>
+  <button id="button">Such Button</button>  
+</body>
+</html>
diff --git a/zh-TW/part1/css-extract/src/index.js b/zh-TW/part1/css-extract/src/index.js
new file mode 100644
index 0000000..9daf7cf
--- /dev/null
+++ b/zh-TW/part1/css-extract/src/index.js
@@ -0,0 +1,2 @@
+require('./styles.css')
+require('./changeColor.js')
diff --git a/zh-TW/part1/css-extract/src/styles.css b/zh-TW/part1/css-extract/src/styles.css
new file mode 100644
index 0000000..1982ab4
--- /dev/null
+++ b/zh-TW/part1/css-extract/src/styles.css
@@ -0,0 +1,19 @@
+h1 {
+  color: rgb(114, 191, 190);
+  text-align: center;
+}
+
+#color {
+  width: 300px;
+  height: 300px;
+  margin: 0 auto;
+}
+
+button {
+  cursor: pointer;
+  display: block;
+  width: 100px;
+  outline: 0;
+  border: 0;
+  margin: 20px auto;
+}
diff --git a/zh-TW/part1/css-extract/webpack.config.dev.js b/zh-TW/part1/css-extract/webpack.config.dev.js
new file mode 100644
index 0000000..db17445
--- /dev/null
+++ b/zh-TW/part1/css-extract/webpack.config.dev.js
@@ -0,0 +1,32 @@
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  devtool: 'cheap-eval-source-map',
+  entry: [
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/dev-server',
+    './src/index'
+  ],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }]
+  },
+  devServer: {
+    contentBase: './dist',
+    hot: true
+  }
+}
diff --git a/zh-TW/part1/css-extract/webpack.config.prod.js b/zh-TW/part1/css-extract/webpack.config.prod.js
new file mode 100644
index 0000000..e6078a4
--- /dev/null
+++ b/zh-TW/part1/css-extract/webpack.config.prod.js
@@ -0,0 +1,31 @@
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+module.exports = {
+  devtool: 'source-map',
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    }),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    }),
+    new ExtractTextPlugin("styles.css")
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loader: ExtractTextPlugin.extract("style-loader", "css-loader")
+    }]
+  }
+}
diff --git a/zh-TW/part1/example1/README.md b/zh-TW/part1/example1/README.md
new file mode 100644
index 0000000..13b46db
--- /dev/null
+++ b/zh-TW/part1/example1/README.md
@@ -0,0 +1,81 @@
+# 範例一 - Bundle 和 Loader
+
+![Official Dependency Tree](http://i.imgur.com/YU4xBPQ.png)
+
+Webpack 簡稱為模組的整合工具。如果你想要深入的話，可以拜訪「modules」和「module bundling definitely」這兩篇優秀的解釋文章：
+[JavaScript Modules: A Beginner’s Guide](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.jw1txw6uh)
+和 [JavaScript Modules Part 2: Module Bundling](https://medium.com/@preethikasireddy/javascript-modules-part-2-module-bundling-5020383cf306#.lfnspler2)。
+我們要保持它的簡單，webpack 運作的方式是透過指定一個單一檔案作為你的進入點。
+這個檔案會是 tree 的 root。然後你每次 `require` 一個檔案從其他檔案並把它加入到 tree。當你執行 `webpack`，所有的檔案和 module 都會被 bundle 成一個檔案。
+
+這裡是一個簡單的範例：
+
+![Dependency Tree](http://i.imgur.com/dSghwwL.png)
+
+根據這樣的情況，你可以有這樣的目錄：
+
+```
+MyDirectory
+|- index.js
+|- UIStuff.js
+|- APIStuff.js
+|- styles.css
+|- extraFile.js
+```
+
+這些可能是你檔案的內容：
+
+```javascript
+// index.js
+require('./styles.css')
+require('./UIStuff.js')
+require('./APIStuff.js')
+
+// UIStuff.js
+var React = require('React')
+React.createClass({
+  // stuff
+})
+
+// APIStuff.js
+var fetch = require('fetch') // fetch polyfill
+fetch('https://google.com')
+```
+
+```css
+/* styles.css */
+body {
+  background-color: rgb(200, 56, 97);
+}
+```
+
+當你執行 `webpack`，你會得到一個這個 tree 的 bundle 內容，雖然 `extraFile.js` 也是在相同的目錄中，但它不是被 bundle 的一部份，因為它在 `index.js` 沒有被 `require`。
+
+`bundle.js` 看起來會像：
+
+```javascript
+// contents of styles.css
+// contents of UIStuff.js + React
+// contents of APIStuff.js + fetch
+```
+
+被 bundle 的這些檔案是你明確所 require 進來的檔案。
+
+### Loaders
+
+你可能會注意到，我在上方的範例做了一些奇怪的事情。我在 JavaScript 檔案中 `require` 一個 css 檔案。
+
+關於 webpack 真的很酷，有趣的事情是，你可以 `require` 更多不只是 JavaScript 的檔案。
+
+在 webpack 這些東西我們稱為 loader。使用這些 loader，你可以 `require` 任何 `.css` 和 `.html`  到 `.png` 檔。
+
+例如在上圖我有：
+
+```javascript
+// index.js
+require('./styles.css')
+```
+
+如果我在我的 webpack 設定檔中，引入 [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/example1/package.json b/zh-TW/part1/example1/package.json
new file mode 100644
index 0000000..ec3e2c0
--- /dev/null
+++ b/zh-TW/part1/example1/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "example1",
+  "version": "1.0.0",
+  "description": "![Official Dependency Tree](http://i.imgur.com/YU4xBPQ.png)",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "fetch": "^1.0.0",
+    "react": "^0.14.7"
+  },
+  "devDependencies": {
+    "css-loader": "^0.23.1",
+    "style-loader": "^0.13.0",
+    "webpack": "^1.12.14"
+  }
+}
diff --git a/zh-TW/part1/example1/src/APIStuff.js b/zh-TW/part1/example1/src/APIStuff.js
new file mode 100644
index 0000000..fc52488
--- /dev/null
+++ b/zh-TW/part1/example1/src/APIStuff.js
@@ -0,0 +1,2 @@
+var fetch = require('fetch') // fetch polyfill
+fetch('https://google.com')
diff --git a/zh-TW/part1/example1/src/UIStuff.js b/zh-TW/part1/example1/src/UIStuff.js
new file mode 100644
index 0000000..3b28df6
--- /dev/null
+++ b/zh-TW/part1/example1/src/UIStuff.js
@@ -0,0 +1,4 @@
+var React = require('React')
+React.createClass({
+  // stuff
+})
diff --git a/zh-TW/part1/example1/src/extraFile.js b/zh-TW/part1/example1/src/extraFile.js
new file mode 100644
index 0000000..eb8c6f1
--- /dev/null
+++ b/zh-TW/part1/example1/src/extraFile.js
@@ -0,0 +1 @@
+console.log('No one likes me')
diff --git a/zh-TW/part1/example1/src/index.js b/zh-TW/part1/example1/src/index.js
new file mode 100644
index 0000000..7f20fdc
--- /dev/null
+++ b/zh-TW/part1/example1/src/index.js
@@ -0,0 +1,3 @@
+require('./styles.css')
+require('./UIStuff.js')
+require('./APIStuff.js')
diff --git a/zh-TW/part1/example1/src/styles.css b/zh-TW/part1/example1/src/styles.css
new file mode 100644
index 0000000..481b3b9
--- /dev/null
+++ b/zh-TW/part1/example1/src/styles.css
@@ -0,0 +1,3 @@
+body {
+  background-color: rgb(200, 56, 97);
+}
diff --git a/zh-TW/part1/example1/webpack.config.js b/zh-TW/part1/example1/webpack.config.js
new file mode 100644
index 0000000..04c29eb
--- /dev/null
+++ b/zh-TW/part1/example1/webpack.config.js
@@ -0,0 +1,24 @@
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+  entry: ['./src/index'], // .js after index is optional
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    }),
+    new webpack.optimize.OccurenceOrderPlugin()
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }]
+  }
+}
diff --git a/zh-TW/part1/example2/README.md b/zh-TW/part1/example2/README.md
new file mode 100644
index 0000000..d29f900
--- /dev/null
+++ b/zh-TW/part1/example2/README.md
@@ -0,0 +1,37 @@
+# 範例二 - 一個簡單的範例
+
+你的目錄結構像是這樣：
+
+```
+MyDirectory
+|- dist
+|- src
+   |- index.js
+|- webpack.config.js
+
+```
+
+然後這是一個非常簡易的 webpack 設定：
+
+```javascript
+// webpack.config.js
+var path = require('path')
+
+module.exports = {
+  entry: ['./src/index'], // .js after index is optional
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  }
+}
+```
+
+我們一個一個複習這些屬性：
+
+* [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 檔案位置。
+  * [filename](https://webpack.github.io/docs/configuration.html#output-filename) - bundle 檔案名稱。
+
+當你執行 `webpack`，會在你的 dist 資料夾建立一個叫做 `bundle.js` 的檔案。
diff --git a/zh-TW/part1/example2/package.json b/zh-TW/part1/example2/package.json
new file mode 100644
index 0000000..91d0f15
--- /dev/null
+++ b/zh-TW/part1/example2/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "example2",
+  "version": "1.0.0",
+  "description": "",
+  "main": "webpack.config.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT"
+}
diff --git a/zh-TW/part1/example2/src/index.js b/zh-TW/part1/example2/src/index.js
new file mode 100644
index 0000000..bf6dbff
--- /dev/null
+++ b/zh-TW/part1/example2/src/index.js
@@ -0,0 +1 @@
+console.log('It works!')
diff --git a/zh-TW/part1/example2/webpack.config.js b/zh-TW/part1/example2/webpack.config.js
new file mode 100644
index 0000000..41c465f
--- /dev/null
+++ b/zh-TW/part1/example2/webpack.config.js
@@ -0,0 +1,9 @@
+var path = require('path')
+
+module.exports = {
+  entry: ['./src/index'], // .js after index is optional
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  }
+}
diff --git a/zh-TW/part1/example3/README.md b/zh-TW/part1/example3/README.md
new file mode 100644
index 0000000..9ebe84b
--- /dev/null
+++ b/zh-TW/part1/example3/README.md
@@ -0,0 +1,67 @@
+# 範例三 - 介紹 Plugins
+
+想像一下，你使用 webpack 將你的檔案 bundle 在一起，然後你意識到 bundle 後的結果是 900KB。這裡有個問題，但是你可以透過 minify 你的 bundle 檔案來做改善。如果需要做到這一點，你需要使用一個我在前面稍早提到的 [UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) plugin。
+
+此外，你需要在本機安裝 webpack 才能實際的去使用這個 plugin。
+
+    npm install --save-dev webpack
+
+現在你可以 require webpack 並 minify 你的程式碼。
+
+```javascript
+// webpack.config.js
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    })
+  ]
+}
+```
+我們一個一個複習這些屬性：
+
+* plugins - 一個可以儲存你的 plugin 的陣列。
+  * [webpack.optimize.UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) - Minify 你的程式碼，並顯示警告訊息。
+
+這個時候，當我們執行 `webpack`，`UglifyJsPlugin` 通過像是移除所有空白的處理，可以將你的檔案減少至 200KB。
+
+你也可以加入 [OccurenceOrderPlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin)。
+
+> 透過發生次數分配 module 和 chunk 的 id。一些常用的 Id 取得較低（短）的 id。這使得 id 可以預測，透過推薦來減少檔案的大小。
+
+老實說，我不太確定底層的機制是如何工作的，但在目前包含 [webpack2 beta 的預設情況下](https://gist.github.com/sokra/27b24881210b56bbaff7)，所以我將它包含在內。
+
+```javascript
+// webpack.config.js
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    }),
+    new webpack.optimize.OccurenceOrderPlugin()
+  ]
+}
+```
+
+所以現在我們寫了一個設定檔讓我們可以 minify 和 bundle 我們的 JavaScript。這個 bundle 檔案可以被複製並貼到其他的專案目錄中，放入 `<script>` 就可以使用。如果*只有 JavaScript*，而且你只在乎關於 webpack 基本的使用，你可以直接跳到[結論](#conclusion)。
diff --git a/zh-TW/part1/example3/package.json b/zh-TW/part1/example3/package.json
new file mode 100644
index 0000000..2e4e38c
--- /dev/null
+++ b/zh-TW/part1/example3/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "example3",
+  "version": "1.0.0",
+  "description": "",
+  "main": "webpack.config.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "webpack": "^1.12.13"
+  }
+}
diff --git a/zh-TW/part1/example3/src/index.js b/zh-TW/part1/example3/src/index.js
new file mode 100644
index 0000000..bf6dbff
--- /dev/null
+++ b/zh-TW/part1/example3/src/index.js
@@ -0,0 +1 @@
+console.log('It works!')
diff --git a/zh-TW/part1/example3/webpack.config.js b/zh-TW/part1/example3/webpack.config.js
new file mode 100644
index 0000000..0b24833
--- /dev/null
+++ b/zh-TW/part1/example3/webpack.config.js
@@ -0,0 +1,18 @@
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+  entry: ['./src/index'], // .js after index is optional
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    }),
+    new webpack.optimize.OccurenceOrderPlugin()
+  ]
+}
diff --git a/zh-TW/part1/example4/README.md b/zh-TW/part1/example4/README.md
new file mode 100644
index 0000000..110cbdb
--- /dev/null
+++ b/zh-TW/part1/example4/README.md
@@ -0,0 +1,70 @@
+在稍早前面的教學中我提到了 [loaders](#loaders)。這些程式碼來幫助我們 require 非 JavaScript 的檔案。在這種情況下，我們將需要 `style-loader` 和 `css-loader`。首先我們需要安裝這些 loader：
+
+    npm install --save-dev style-loader css-loader
+
+現在安裝完後，我們可以調整我們的 webpack 設定來引入 `css-loader`：
+
+```javascript
+// webpack.config.js
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    }),
+    new webpack.optimize.OccurenceOrderPlugin()
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }]
+  }
+}
+```
+
+我們一個一個複習這些屬性：
+
+* [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 （正規表達式）的檔案。
+
+這個時候你執行 `webpack`，如果你 `require` 的檔案結尾是 `.css`，然會我們會使用 `style` 和 `css` loader，將 CSS 加入到 bundle。
+
+如果我們沒有 loaders，我們會得到像是這樣的錯誤：
+
+```
+ERROR in ./test.css
+Module parse failed: /Users/Developer/workspace/tutorials/webpack/part1/example1/test.css
+Line 1: Unexpected token {
+You may need an appropriate loader to handle this file type.
+```
+
+**可選項目**
+
+如果你想要使用 SCSS 而不是 CSS 你需要執行：
+
+    npm install --save-dev sass-loader node-sass webpack
+
+然後你的 loader 必須修改成：
+
+```javascript
+{
+  test: /\.scss$/,
+  loaders: ["style", "css", "sass"]
+}
+```
+
+處理 LESS 也類似於這個方式。
+
+要知道這些需要被指定的 loader 是有*順序*的，這是一個很重要部分。在上面的範例，`sass` loader 是第一個應用在你的 `.scss` 檔案，然後是 `css` loader，最後是 `style` loader。你可以看到，這些 loader 的應用模式是由右到左。
diff --git a/zh-TW/part1/example4/package.json b/zh-TW/part1/example4/package.json
new file mode 100644
index 0000000..a3203e9
--- /dev/null
+++ b/zh-TW/part1/example4/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "example4",
+  "version": "1.0.0",
+  "description": "",
+  "main": "webpack.config.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "webpack": "^1.12.13"
+  }
+}
diff --git a/zh-TW/part1/example4/src/index.html b/zh-TW/part1/example4/src/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/zh-TW/part1/example4/src/index.js b/zh-TW/part1/example4/src/index.js
new file mode 100644
index 0000000..bf6dbff
--- /dev/null
+++ b/zh-TW/part1/example4/src/index.js
@@ -0,0 +1 @@
+console.log('It works!')
diff --git a/zh-TW/part1/example4/src/styles.css b/zh-TW/part1/example4/src/styles.css
new file mode 100644
index 0000000..e69de29
diff --git a/zh-TW/part1/example4/webpack.config.js b/zh-TW/part1/example4/webpack.config.js
new file mode 100644
index 0000000..04c29eb
--- /dev/null
+++ b/zh-TW/part1/example4/webpack.config.js
@@ -0,0 +1,24 @@
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+  entry: ['./src/index'], // .js after index is optional
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    }),
+    new webpack.optimize.OccurenceOrderPlugin()
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }]
+  }
+}
diff --git a/zh-TW/part1/example5/README.md b/zh-TW/part1/example5/README.md
new file mode 100644
index 0000000..dbfcc85
--- /dev/null
+++ b/zh-TW/part1/example5/README.md
@@ -0,0 +1,111 @@
+# 範例五 - 加入更多的 Plugin
+
+現在我們的網站有基礎的樣式，但我們還需要實際的網站樣式。
+
+我們通過 [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) 來做，它讓我們可以產生一個 HTML 頁面使用現有的。我們將使用一個目前現有的 `index.html`。
+
+首先我們需要安裝 plugin：
+
+    npm install --save-dev html-webpack-plugin@2
+
+然後在我們的 webpack 設定檔加入：
+
+```javascript
+// webpack.config.js
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    }),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }]
+  }
+}
+```
+
+這個時候當你執行 `webpack`，因為我們指定一個 `HtmlWebpackPlugin` 和 `./src/index.html` 的 template，它會產生一個檔案叫做 `index.html` 在我們的 `dist` 資料夾，而網頁的內容是 `./src/index.html`。
+
+如果 `index.html` 作為 template 是空的也沒用。現在是個好時機我們可以填入一些元素進去。
+
+```html
+<html>
+<head>
+  <title>Webpack Tutorial</title>
+</head>
+<body>
+  <h1>Very Website</h1>
+  <section id="color"></section>
+  <button id="button">Such Button</button>
+
+</body>
+</html>
+```
+
+注意到我們沒有放入一個 `bundle.js` 的 `<script>` 標籤到我們的 HTML。實際上 plugin 會自動的幫你處理。如果你放入 script，到頭來你會載入兩次相同的程式碼。
+
+而讓我們加入一些基本的樣式在 `styles.css`：
+
+```css
+h1 {
+  color: rgb(114, 191, 190);
+  text-align: center;
+}
+
+#color {
+  width: 300px;
+  height: 300px;
+  margin: 0 auto;
+}
+
+button {
+  cursor: pointer;
+  display: block;
+  width: 100px;
+  outline: 0;
+  border: 0;
+  margin: 20px auto;
+}
+```
+
+#### 備註
+
+我覺得我應該提到 `html-webpack-plugin` 需要謹慎使用。對我來說，如果你真的只是簡單的啟用一個 SPA，webpack 應該只產生 HTML 檔案。這裡只需要一個 HTML 檔案，我不會推薦它來產生 12 個 HTML 檔案，當作一個學習經驗。這意思不是說你不能使用 html 檔案之類的，像是 angular 指令，只需要 HTML template 檔案。在這個情況下你可以做類似像是：
+
+```javascript
+// ...directive stuff
+template: require('./templates/button.html') // 使用 raw loader
+```
+
+相反的，它意味著你不應該做這樣的事情︰
+
+```javascript
+new HtmlWebpackPlugin
+  template: './src/index.html'
+}),
+new HtmlWebpackPlugin({
+  template: './src/button.html'
+}),new HtmlWebpackPlugin({
+  template: './src/page2.html'
+})
+```
+
+如果我這個部份我搞錯了，請任何有這方面經驗的人隨時糾正我。
diff --git a/zh-TW/part1/example5/package.json b/zh-TW/part1/example5/package.json
new file mode 100644
index 0000000..3defa6d
--- /dev/null
+++ b/zh-TW/part1/example5/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "example5",
+  "version": "1.0.0",
+  "description": "",
+  "main": "webpack.config.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "html-webpack-plugin": "^2.8.1",
+    "webpack": "^1.12.13"
+  }
+}
diff --git a/zh-TW/part1/example5/src/index.html b/zh-TW/part1/example5/src/index.html
new file mode 100644
index 0000000..7b4b480
--- /dev/null
+++ b/zh-TW/part1/example5/src/index.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+  <title>Webpack Tutorial</title>
+</head>
+<body>
+  <h1>Very Website</h1>
+  <section id="color"></section>
+  <button id="button">Such Button</button>
+  
+</body>
+</html>
diff --git a/zh-TW/part1/example5/src/index.js b/zh-TW/part1/example5/src/index.js
new file mode 100644
index 0000000..bf6dbff
--- /dev/null
+++ b/zh-TW/part1/example5/src/index.js
@@ -0,0 +1 @@
+console.log('It works!')
diff --git a/zh-TW/part1/example5/src/styles.css b/zh-TW/part1/example5/src/styles.css
new file mode 100644
index 0000000..1982ab4
--- /dev/null
+++ b/zh-TW/part1/example5/src/styles.css
@@ -0,0 +1,19 @@
+h1 {
+  color: rgb(114, 191, 190);
+  text-align: center;
+}
+
+#color {
+  width: 300px;
+  height: 300px;
+  margin: 0 auto;
+}
+
+button {
+  cursor: pointer;
+  display: block;
+  width: 100px;
+  outline: 0;
+  border: 0;
+  margin: 20px auto;
+}
diff --git a/zh-TW/part1/example5/webpack.config.js b/zh-TW/part1/example5/webpack.config.js
new file mode 100644
index 0000000..6bab936
--- /dev/null
+++ b/zh-TW/part1/example5/webpack.config.js
@@ -0,0 +1,28 @@
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    }),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }]
+  }
+}
diff --git a/zh-TW/part1/example6/README.md b/zh-TW/part1/example6/README.md
new file mode 100644
index 0000000..4d68840
--- /dev/null
+++ b/zh-TW/part1/example6/README.md
@@ -0,0 +1,136 @@
+# 範例六 - 開發伺服器
+
+現在我們想要實際在瀏覽器看到我們的網站，需要一個 web 伺服器來服務我們的程式碼。webpack 自帶了方便的 `webpack-dev-server`，你需要在本機和全域安裝。
+
+    npm install -g webpack-dev-server
+    npm install --save-dev webpack-dev-server
+
+dev server 可以在瀏覽器看到你的網站是怎麼樣子以及可以更快速的開發，是一個相當有用的資源。預設情況下你可以拜訪 `http://localhost:8080`。不幸的是，像是 hot reload 的功能並不是內建的，還需要一些其他的設定。
+
+這是 webpack 設定檔一個很棒的分離點，意思是說你可以將他分成用於「development」以及「production」。因為我們必須在這個教學中保持簡單的方式，所不會有很大的改變，但是會介紹 webpack 很棒的可設置性。我們稱他們為 `webpack.config.dev.js` 和 `webpack.config.prod.js`。
+
+```javascript
+// webpack.config.dev.js
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  devtool: 'cheap-eval-source-map',
+  entry: [
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/dev-server',
+    './src/index'
+  ],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }]
+  },
+  devServer: {
+    contentBase: './dist',
+    hot: true
+  }
+}
+```
+
+
+**修改**
+
+1. dev 設定檔省略了優化，當你不斷的 rebuild 時，他們不是必要的。所以不需要 `webpack.optimize` plugins。
+
+2. dev 設定檔需要對 dev server 做必要的設定，你可以到[這裡](https://webpack.github.io/docs/webpack-dev-server.html)了解更多。
+
+總結：
+
+* entry: 兩個新的進入點將伺服器連結到瀏覽器，方便 HMR。
+* devServer
+  * contentBase: 服務的檔案來自哪裡。
+  * hot: 啟用 HMR。
+---
+
+prod 設定檔不需要改變太多：
+
+```javascript
+// webpack.config.prod.js
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  devtool: 'source-map',
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    }),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }]
+  }
+}
+```
+
+我也加入一個全新的屬性在 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`。
+
+如果要執行 dev server，我們可以執行：
+
+    webpack-dev-server --config webpack.config.dev.js
+
+如果我們要 build production 的程式碼，我們可以執
+
+    webpack --config webpack.config.prod.js
+
+
+如果想要讓這些指令使用的更容易，我們可以到 `package.json` 來設定簡單的 script。
+
+我們加入 `scripts` 屬性到設定檔：
+
+```javascript
+// package.json
+{
+  //...
+  "scripts": {
+    "build": "webpack --config webpack.config.prod.js",
+    "dev"  : "webpack-dev-server --config webpack.config.dev.js"
+  }
+  //...
+}
+```
+
+我們可以執行這些指令：
+
+```
+npm run build
+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 設定檔選項的有用資訊，我推薦你可以看一下，但是我把它分開了，因為我覺得會因為這個不太重要的原因，這會延長這個教學。
diff --git a/zh-TW/part1/example6/package.json b/zh-TW/part1/example6/package.json
new file mode 100644
index 0000000..a8d12b8
--- /dev/null
+++ b/zh-TW/part1/example6/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "example6",
+  "version": "1.0.0",
+  "description": "",
+  "main": "webpack.config.js",
+  "scripts": {
+    "build": "webpack --config webpack.config.prod.js",
+    "dev": "webpack-dev-server --config webpack.config.dev.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "html-webpack-plugin": "^2.8.1",
+    "webpack": "^1.12.13",
+    "webpack-dev-server": "^1.14.1"
+  }
+}
diff --git a/zh-TW/part1/example6/src/index.html b/zh-TW/part1/example6/src/index.html
new file mode 100644
index 0000000..7b4b480
--- /dev/null
+++ b/zh-TW/part1/example6/src/index.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+  <title>Webpack Tutorial</title>
+</head>
+<body>
+  <h1>Very Website</h1>
+  <section id="color"></section>
+  <button id="button">Such Button</button>
+  
+</body>
+</html>
diff --git a/zh-TW/part1/example6/src/index.js b/zh-TW/part1/example6/src/index.js
new file mode 100644
index 0000000..327f357
--- /dev/null
+++ b/zh-TW/part1/example6/src/index.js
@@ -0,0 +1 @@
+console.log('hello there my friends')
diff --git a/zh-TW/part1/example6/src/styles.css b/zh-TW/part1/example6/src/styles.css
new file mode 100644
index 0000000..1982ab4
--- /dev/null
+++ b/zh-TW/part1/example6/src/styles.css
@@ -0,0 +1,19 @@
+h1 {
+  color: rgb(114, 191, 190);
+  text-align: center;
+}
+
+#color {
+  width: 300px;
+  height: 300px;
+  margin: 0 auto;
+}
+
+button {
+  cursor: pointer;
+  display: block;
+  width: 100px;
+  outline: 0;
+  border: 0;
+  margin: 20px auto;
+}
diff --git a/zh-TW/part1/example6/webpack.config.dev.js b/zh-TW/part1/example6/webpack.config.dev.js
new file mode 100644
index 0000000..db17445
--- /dev/null
+++ b/zh-TW/part1/example6/webpack.config.dev.js
@@ -0,0 +1,32 @@
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  devtool: 'cheap-eval-source-map',
+  entry: [
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/dev-server',
+    './src/index'
+  ],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }]
+  },
+  devServer: {
+    contentBase: './dist',
+    hot: true
+  }
+}
diff --git a/zh-TW/part1/example6/webpack.config.prod.js b/zh-TW/part1/example6/webpack.config.prod.js
new file mode 100644
index 0000000..ed72d58
--- /dev/null
+++ b/zh-TW/part1/example6/webpack.config.prod.js
@@ -0,0 +1,29 @@
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  devtool: 'source-map',
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    }),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }]
+  }
+}
diff --git a/zh-TW/part1/example7/README.md b/zh-TW/part1/example7/README.md
new file mode 100644
index 0000000..004fd7d
--- /dev/null
+++ b/zh-TW/part1/example7/README.md
@@ -0,0 +1,41 @@
+# 範例七 - 開始撰寫程式
+
+大多數的人會慌亂的原因似乎是因為：webpack 事實上需要通過這些取得的進入點來撰寫 JavaScript；然而我們現在已經到達了這個教學課程最高潮的部分。
+
+如果你還沒準備好：執行 `npm run dev`，以及導到 `http://localhost:8080`。設定 dev server 是不是可以 hot reload。在你每次儲存你專案所編輯的任何一個檔案部份時，瀏覽器將會重新載入來顯示你的修改。
+
+我們也需要一個 npm package，為了來示範如何在前端使用它們。
+
+    npm install --save pleasejs
+
+PleaseJS 是一個隨機色彩的產生器，其中我們需要在按鈕中加入 hook 來改變我們的 div 顏色。
+
+```javascript
+// index.js
+
+// 接受 hot module reloading
+if (module.hot) {
+  module.hot.accept()
+}
+
+require('./styles.css') // 網頁現在有了樣式
+var Please = require('pleasejs')
+var div = document.getElementById('color')
+var button = document.getElementById('button')
+
+function changeColor() {
+  div.style.backgroundColor = Please.make_color()
+}
+
+button.addEventListener('click', changeColor)
+```
+
+有趣的是，[為了讓 Hot Module Replacement 可以執行](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html#what-is-needed-to-use-it)，你需要加入下面的程式碼：
+
+```javascript
+if (module.hot) {
+  module.hot.accept()
+}
+```
+
+在一個 module 或是它的父 module。
diff --git a/zh-TW/part1/example7/package.json b/zh-TW/part1/example7/package.json
new file mode 100644
index 0000000..60b886a
--- /dev/null
+++ b/zh-TW/part1/example7/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "example7",
+  "version": "1.0.0",
+  "description": "",
+  "main": "webpack.config.js",
+  "scripts": {
+    "build": "webpack --config webpack.config.prod.js",
+    "dev": "webpack-dev-server --config webpack.config.dev.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "css-loader": "^0.23.1",
+    "html-webpack-plugin": "^2.8.1",
+    "style-loader": "^0.13.0",
+    "webpack": "^1.12.13",
+    "webpack-dev-server": "^1.14.1"
+  },
+  "dependencies": {
+    "pleasejs": "^0.4.2"
+  }
+}
diff --git a/zh-TW/part1/example7/src/index.html b/zh-TW/part1/example7/src/index.html
new file mode 100644
index 0000000..55fff75
--- /dev/null
+++ b/zh-TW/part1/example7/src/index.html
@@ -0,0 +1,10 @@
+<html>
+<head>
+  <title>Webpack Tutorial</title>
+</head>
+<body>
+  <h1>Very Website</h1>
+  <section id="color"></section>
+  <button id="button">Such Button</button>  
+</body>
+</html>
diff --git a/zh-TW/part1/example7/src/index.js b/zh-TW/part1/example7/src/index.js
new file mode 100644
index 0000000..42be09d
--- /dev/null
+++ b/zh-TW/part1/example7/src/index.js
@@ -0,0 +1,16 @@
+// Accept hot module reloading
+if (module.hot) {
+  module.hot.accept()
+}
+
+require('./styles.css') // The page is now styled
+var Please = require('pleasejs')
+var div = document.getElementById('color')
+var button = document.getElementById('button')
+
+function changeColor() {
+  div.style.backgroundColor = Please.make_color()
+  console.log('HMR works no')
+}
+
+button.addEventListener('click', changeColor)
diff --git a/zh-TW/part1/example7/src/styles.css b/zh-TW/part1/example7/src/styles.css
new file mode 100644
index 0000000..1982ab4
--- /dev/null
+++ b/zh-TW/part1/example7/src/styles.css
@@ -0,0 +1,19 @@
+h1 {
+  color: rgb(114, 191, 190);
+  text-align: center;
+}
+
+#color {
+  width: 300px;
+  height: 300px;
+  margin: 0 auto;
+}
+
+button {
+  cursor: pointer;
+  display: block;
+  width: 100px;
+  outline: 0;
+  border: 0;
+  margin: 20px auto;
+}
diff --git a/zh-TW/part1/example7/webpack.config.dev.js b/zh-TW/part1/example7/webpack.config.dev.js
new file mode 100644
index 0000000..db17445
--- /dev/null
+++ b/zh-TW/part1/example7/webpack.config.dev.js
@@ -0,0 +1,32 @@
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  devtool: 'cheap-eval-source-map',
+  entry: [
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/dev-server',
+    './src/index'
+  ],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }]
+  },
+  devServer: {
+    contentBase: './dist',
+    hot: true
+  }
+}
diff --git a/zh-TW/part1/example7/webpack.config.prod.js b/zh-TW/part1/example7/webpack.config.prod.js
new file mode 100644
index 0000000..ed72d58
--- /dev/null
+++ b/zh-TW/part1/example7/webpack.config.prod.js
@@ -0,0 +1,29 @@
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  devtool: 'source-map',
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    }),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }]
+  }
+}
diff --git a/zh-TW/part1/html-reload/README.md b/zh-TW/part1/html-reload/README.md
new file mode 100644
index 0000000..be34c78
--- /dev/null
+++ b/zh-TW/part1/html-reload/README.md
@@ -0,0 +1,116 @@
+# 番外 - 讓你的 HTML 可以 hot reload
+
+所以，當我測試的時候我才知道 `index.html` 不會被 hot reload！在之後搜尋的結果，我最後找到了[有幫助的答案](http://stackoverflow.com/questions/33183931/how-to-watch-index-html-using-webpack-dev-server-and-html-webpack-plugin)，
+這需要一個 [loader](https://github.com/webpack/raw-loader) 來讓我們 hacky，也需要另一個 [plugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin) 來防止這個 hacky 到 production。
+
+基本上要讓 webpack 可以 hot reload 我們的 HTML，我們需要 require 我們其中檔案之一，讓它變成我們 dependency tree 的一部份。為了做到這一點，我們將會使用 `raw-loader` loader，它可以 pull 我們的 HTML 變成字串到我們的 JavaScript，但是另外我們真正需要做的是：加入 HTML 到 dependency tree。
+
+所以讓我們加入這個 loader 到我們的 dev 設定檔：
+
+首先我們需要安裝：
+
+    npm install --save-dev raw-loader
+
+然我們加入：
+
+```javascript
+// webpack.config.dev.js
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  devtool: 'cheap-eval-source-map',
+  entry: [
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/dev-server',
+    './src/index'
+  ],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }, {
+      test: /\.html$/,
+      loader: "raw-loader" // loaders: ['raw-loader']，這個方式也是可以被接受的。
+    }]
+  },
+  devServer: {
+    contentBase: './dist',
+    hot: true
+  }
+}
+```
+
+這個時候當你執行 `webpack`，如果們 `require` 一個檔案它的附檔名是 `.html`，然後我們將使用 `raw-loader` loader ，其中加入 HTML 到 bundle。
+
+現在我們目前空的 `index.js` 檔案我們可以這麼做。
+
+```javascript
+// index.js
+require('./index.html')
+```
+
+如果你現在要檢查 hot reload 是否可以執行，但是你必須要知道我們只是 require `index.html` 到我們的 `index.js`，這麼做絕對與 hot reload 無關。我們不想要在 production 使用 hot reload，這就是為什麼我們要使用 [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')`。為什麼要 `JSON.stringify`？根據文件的解釋：
+
+> 如果值是一個字串，它會被作為一個程式碼片段。
+
+現在我們已經了解了，我們可以加入這個 plugin 到我們的 production 設定檔：
+
+```javascript
+// webpack.config.prod.js
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  devtool: 'source-map',
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    }),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    }),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }]
+  }
+}
+```
+
+並在我們的 `index.js` 加入一個條件判斷：
+
+```javascript
+if (process.env.NODE_ENV !== 'production') {
+  require('./index.html')
+}
+```
+
+解決問題啦。在 production build 中，我們不需要 `index.html` 做為 dependency tree 的一部份，我們不需要 `index.html`，這也意味著我們不需要 `raw-loader`。
diff --git a/zh-TW/part1/html-reload/package.json b/zh-TW/part1/html-reload/package.json
new file mode 100644
index 0000000..d3a8e6b
--- /dev/null
+++ b/zh-TW/part1/html-reload/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "example6",
+  "version": "1.0.0",
+  "description": "",
+  "main": "webpack.config.js",
+  "scripts": {
+    "build": "webpack --config webpack.config.prod.js",
+    "dev": "webpack-dev-server --config webpack.config.dev.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "html-webpack-plugin": "^2.8.1",
+    "raw-loader": "^0.5.1",
+    "webpack": "^1.12.13",
+    "webpack-dev-server": "^1.14.1"
+  }
+}
diff --git a/zh-TW/part1/html-reload/src/index.html b/zh-TW/part1/html-reload/src/index.html
new file mode 100644
index 0000000..44810cb
--- /dev/null
+++ b/zh-TW/part1/html-reload/src/index.html
@@ -0,0 +1,10 @@
+<html>
+<head>
+  <title>Webpack Tutorial</title>
+</head>
+<body>
+  <h1>Very Website</h1>
+  <section id="color"></section>
+  <button id="button">Such Button</button>
+</body>
+</html>
diff --git a/zh-TW/part1/html-reload/src/index.js b/zh-TW/part1/html-reload/src/index.js
new file mode 100644
index 0000000..8b8a567
--- /dev/null
+++ b/zh-TW/part1/html-reload/src/index.js
@@ -0,0 +1,3 @@
+if (process.env.NODE_ENV !== 'production') {
+  require('./index.html')
+}
diff --git a/zh-TW/part1/html-reload/src/styles.css b/zh-TW/part1/html-reload/src/styles.css
new file mode 100644
index 0000000..dbb6325
--- /dev/null
+++ b/zh-TW/part1/html-reload/src/styles.css
@@ -0,0 +1,20 @@
+h1 {
+  color: rgb(114, 191, 190);
+}
+
+#color {
+  width: 300px;
+  height: 300px;
+  margin: 0 auto;
+}
+
+button {
+  cursor: pointer;
+  display: inline-block;
+  height: 20px;
+  background-color: rgb(123, 109, 198);
+  color: rgb(255, 255, 255);
+  padding: 10px 5px;
+  border-radius: 4px;
+  border-bottom: 2px solid rgb(143, 132, 200);
+}
diff --git a/zh-TW/part1/html-reload/webpack.config.dev.js b/zh-TW/part1/html-reload/webpack.config.dev.js
new file mode 100644
index 0000000..8c681e8
--- /dev/null
+++ b/zh-TW/part1/html-reload/webpack.config.dev.js
@@ -0,0 +1,35 @@
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  devtool: 'cheap-eval-source-map',
+  entry: [
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/dev-server',
+    './src/index'
+  ],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }, {
+      test: /\.html$/,
+      loader: "raw-loader" // loaders: ['raw-loader'] is also perfectly acceptable.
+    }]
+  },
+  devServer: {
+    contentBase: './dist',
+    hot: true
+  }
+}
diff --git a/zh-TW/part1/html-reload/webpack.config.prod.js b/zh-TW/part1/html-reload/webpack.config.prod.js
new file mode 100644
index 0000000..8c60d7a
--- /dev/null
+++ b/zh-TW/part1/html-reload/webpack.config.prod.js
@@ -0,0 +1,32 @@
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  devtool: 'source-map',
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    }),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    }),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }]
+  }
+}
diff --git a/zh-TW/part2/README.md b/zh-TW/part2/README.md
new file mode 100644
index 0000000..3e603f7
--- /dev/null
+++ b/zh-TW/part2/README.md
@@ -0,0 +1,463 @@
+# Beginner Webpack Tutorial Part 2 - Using Webpack with Babel :zap:
+
+Now that we learned the basics of using webpack, we're going to learn to leverage babel 6 in order
+to write ES6, the new specification of javascript.
+
+If you've ever written ES6, it's hard to want to go back to writing ES5. If you haven't had the
+chance to write ES6 yet, a big reason is probably because setting up a dev environment, *understanding*
+all the configuration options, and deciding which ones to use can be discouraging.
+
+I hope that this tutorial can make that process of getting started much easier.
+
+## Requirements
+
+1. If you haven't already please look at [part 1][2]
+2. For an overview of ES6, [this](https://github.com/DrkSephy/es6-cheatsheet) is a good resource.
+
+## Contributing
+
+I will gladly accept any and all contributions/corrections. If you have any questions,
+feel free to leave them as issues. If I made mistakes, please point them out. Finally, if you feel
+that I left anything out or could have explained something better, make sure to leave an issue or
+make a pull request.
+
+## Table Of Contents
+
+* [Babel](#babel)
+  * [What Does Babel Do?](#what-does-babel-do)
+  * [Configuring Babel](#configuring-babel)
+* [Webpack](#webpack)
+  * [A New Loader](#a-new-loader)
+* [We are Done?](#we-are-done)
+  * [Requiring With ES6 Modules](#requiring-with-es6-modules)
+* [Extra Credit](#extra-credit)
+  * [Production Environment Variables With Webpack and Babel](#production-environment-variables-with-webpack-and-babel)
+  * [Adding Linting](#adding-linting)
+* [Conclusion](#conclusion)
+
+
+## Babel
+
+If you want a more in-depth explanation, and finer grained control over babel then please look at
+[their handbook][1]. I'm paraphrasing the basics here.
+
+### What Does Babel Do?
+
+Simply stated, babel lets you take advantage of a much more fully featured specification of
+javascript, which isn't supported by most browsers and environments, and turns
+it into ES5, which has much more widespread support.
+
+With babel, this code, which is *just* getting support now in the latest browsers
+
+```javascript
+const square = n => n * n;
+```
+
+is transformed into something like
+
+```javascript
+var square = function square(n) {
+  return n * n;
+};
+```
+
+which you could run anywhere that supports javascript.
+
+### Configuring Babel
+
+Another tool, another config file. This time around we'll have a file called
+
+    .babelrc
+
+Thankfully, the `.babelrc` file will only be a single line long.
+
+```javascript
+{
+  "presets": ["es2015", "stage-2"]
+}
+```
+
+The only option you need to specify is `presets`, which are described in the excerpt below:
+
+> JavaScript also has some proposals that are making their way into the standard
+through the TC39's (the technical committee behind the ECMAScript standard)
+process.
+
+> This process is broken through a 5 stage (0-4) process. As proposals gain more
+traction and are more likely to be accepted into the standard they proceed
+through the various stages, finally being accepted into the standard at stage 4.
+
+> Note that there is no stage-4 preset as it is simply the `es2015` preset
+> above.
+
+To sum it up, presets are bundles of plugins that add features to the code you're writing. `es2015`
+adds features that definitely are going to be in the official release of ES6, and the presets
+that are stages 0-3 are proposals for future specifications of Javascript that are still being drafted.
+The lower you go, the higher the risk that the features you're using are going to have support dropped.
+
+From my experience, the lowest I've needed to go is `stage-2` to be able to use something called [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread). You can see the rest of the proposals
+[here](https://github.com/tc39/ecma262), and decide how low you want to go.
+
+Anyways to use these presets, we need to install them
+
+    npm install --save-dev babel-preset-es2015 babel-preset-stage-2
+
+and that's actually all you need to do.
+
+## Webpack
+
+We're going to use the same exact configs from [example 7 from part 1](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example7), but add the
+functionality needed to use ES6.
+
+Current configs:
+
+```javascript
+// webpack.config.dev.js
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  devtool: 'cheap-eval-source-map',
+  entry: [
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/dev-server',
+    './src/index'
+  ],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }]
+  },
+  devServer: {
+    contentBase: './dist',
+    hot: true
+  }
+}
+```
+
+and
+
+```javascript
+// webpack.config.prod.js
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  devtool: 'source-map',
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    }),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }]
+  }
+}
+```
+
+### A New Loader
+
+To transpile our code to ES5 we need to run it through a new loader called `babel-loader`, which has
+a dependency of `babel-core`. This loader will use our `.babelrc` config to understand and transform
+our code into its new form.
+
+    npm install --save-dev babel-loader babel-core
+
+We add that to both our dev and prod configs:
+
+```javascript
+// To save space I'll just show the "loaders" part
+
+// Both webpack.config.dev.js and webpack.config.prod.js
+module: {
+  loaders: [{
+    test: /\.css$/,
+    loaders: ['style', 'css']
+  }, {
+    test: /\.js$/,
+    loaders: ['babel'],
+    include: path.join(__dirname, 'src')
+  }]
+}
+```
+
+An **extremely important** thing to note is the usage of the `include` property. When we run
+`webpack`, because we have set our `test` to `/.js$/`, webpack will try to run the babel loader on
+every single `js` file in your dependency tree.
+
+Can you spot the problem with this? What if I `require('bluebird')`, or any other large `npm` package?
+It'll try to run **node_modules** through your `babel-loader`, which will extend your build process
+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). 
+
+## We are Done?
+
+Honestly I thought this tutorial would be longer, but it seems I forgot that adding babel is
+actually pretty trivial. We can now update our earlier code in `index.js` to use the ES6 syntax:
+
+```javascript
+// index.js
+
+// Accept hot module reloading
+if (module.hot) {
+  module.hot.accept()
+}
+
+require('./styles.css') // The page is now styled
+const Please = require('pleasejs')
+
+const div = document.getElementById('color')
+const button = document.getElementById('button')
+const changeColor = () => div.style.backgroundColor = Please.make_color()
+
+button.addEventListener('click', changeColor)
+```
+
+### Requiring With ES6 Modules
+
+Another thing to note is that now we can use the es6 module system. For example, instead of
+
+```javascript
+const Please = require('pleasejs')
+```
+
+we can now do
+
+```javascript
+import Please from 'pleasejs'
+```
+
+## Extra Credit
+
+Since that actually didn't take so long I'm going to cover two more topics that are pretty important
+and useful.
+
+### Production Environment Variables With Webpack and Babel
+
+#### Webpack
+
+If we don't want to execute a portion of code in production we can use the handy dandy
+[DefinePlugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin).
+
+The plugin lets us create a global constant for our entire bundle, which we could name anything,
+such as `DONT_USE_IN_PRODUCTION: true`, but more practically, it's a much better choice to use
+`process.env.NODE_ENV: JSON.stringify('production')`. This is because many programs recognize and
+use `process.env.NODE_ENV` for additional features and optimization of your code.
+
+Why `JSON.stringify`? Because according to the docs:
+
+> If the value is a string it will be used as a code fragment.
+
+This means a value of `'production'` would just be an error. If you think `JSON.stringify`
+is weird, a valid alternative is `'"production"'`.
+
+Your plugins array should now look like
+
+```javascript
+plugins: [
+  new webpack.optimize.UglifyJsPlugin({
+    compressor: {
+      warnings: false,
+    },
+  }),
+  new webpack.optimize.OccurenceOrderPlugin(),
+  new HtmlWebpackPlugin({
+    template: './src/index.html'
+  }),
+  new webpack.DefinePlugin({
+    'process.env.NODE_ENV': JSON.stringify('production')
+  })
+]
+```
+
+Now, if we don't want to execute some code in production, we can put it in an if statement:
+
+```javascript
+if (process.env.NODE_ENV !== 'production') {
+  // not for production
+}
+```
+
+In our current project we could say to exclude the hot reloading if it's in production:
+
+```javascript
+// Accept hot module reloading during development
+if (process.env.NODE_ENV !== 'production') {
+  if (module.hot) {
+    module.hot.accept()
+  }
+}
+```
+
+#### Babel
+
+Defining our production variable as `process.env.NODE_ENV` has another added benefit.
+
+[From the handbook][1]
+
+> The current environment will use process.env.BABEL_ENV. When BABEL_ENV is not available,
+it will fallback to NODE_ENV, and if that is not available it will default to "development".
+
+This means that the babel environment will match our webpack environment.
+
+We can take advantage of this, tweaking our `.babelrc` to have development only config by adding `env`:
+
+```javascript
+{
+  "presets": ["es2015", "stage-2"],
+  "env": {
+    // only happens if NODE_ENV is undefined or set to 'development'
+    "development": {
+      // ignored when NODE_ENV is production!
+  }
+}
+```
+
+We'll be using this in part 3 with react when we introduce the
+[React Transform HMR](https://github.com/gaearon/react-transform-hmr)
+
+### Adding Linting
+
+If you've looked at any project seeds/starters for Webpack/React, you've probably seen a file called
+`.eslintrc`. If you aren't using an IDE, but instead are using a text editor like Atom, Sublime,
+Emacs, Vim, etc., eslint provides syntax and style checks, pointing out your mistakes. Moreover,
+even if you're using an IDE, it can provide more features, and ensure uniformity in coding style
+for all contributors to the project.
+
+Do take note
+that if you want it integrated into your editor, you need to install a package. For example, I use
+[linter-eslint](https://github.com/AtomLinter/linter-eslint) for Atom.
+
+To reduce the amount of our config we write manually, we're going to take advantage of the fact
+that eslint lets you inherit from other people's configs. I always like to use a config based upon
+[airbnb's style guide](https://github.com/airbnb/javascript).
+
+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
+
+Our starting config will look like:
+
+```javascript
+// .eslintrc
+{
+  "extends": "airbnb/base" // 'airbnb/base' because 'airbnb' assumes usage of react
+}
+```
+
+However because linting is **highly opinionated**, I like to tweak this a bit. If you want to know what
+all these rules mean, or tweak them to fit your preferences look [here](http://eslint.org/docs/rules/):
+
+```javascript
+// .eslintrc
+{
+  "extends": "airbnb/base",
+  "rules": {
+    "comma-dangle": 0,
+    "no-console": 0,
+    "semi": [2, "never"],
+    "func-names": 0,
+    "space-before-function-paren": 0,
+    "no-multi-spaces": 0
+  }
+}
+```
+
+Additionally, out of the box, eslint does not support/recognize babel syntax so we be installing
+two new packages:
+
+    npm install --save-dev babel-eslint eslint-plugin-babel
+
+and tweaking our config once more to add [babel specific rules](https://github.com/babel/eslint-plugin-babel):
+
+```javascript
+// .eslintrc
+{
+  "extends": "airbnb/base",
+  "parser": "babel-eslint",
+  "rules": {
+    "comma-dangle": 0,
+    "no-console": 0,
+    "semi": [2, "never"],
+    "func-names": 0,
+    "space-before-function-paren": 0,
+    "no-multi-spaces": 0,
+    "babel/generator-star-spacing": 1,
+    "babel/new-cap": 1,
+    "babel/object-shorthand": 1,
+    "babel/arrow-parens": 1,
+    "babel/no-await-in-loop": 1
+  },
+  "plugins": [
+    "babel"
+  ]
+}
+```
+
+Finally it's also a good idea to add an npm script for linting to our existing package.json file
+
+```javascript
+// package.json
+"scripts": {
+  "build": "webpack --config webpack.config.prod.js",
+  "dev": "webpack-dev-server --config webpack.config.dev.js",
+  "lint": "eslint src"
+}
+```
+
+which you can run with `npm run lint` just to make sure none of your code violates the rules you specified.
+
+## Conclusion
+
+I've put the end result of all of this into
+[example 1](https://github.com/AriaFallah/WebpackTutorial/tree/master/part2/example1) just in case
+I wasn't clear on anything. If you still have trouble understanding, feel free to leave a question
+in issues.
+
+So now we can easily write ES6 code, and additionally, understand the config that enables us to write it :tada:!
+
+However, just because you can write it from scratch, it doesn't mean you have to. For your convenience,
+[I have made a separate repository you can clone](https://github.com/AriaFallah/minimal-babel-starter)
+to get started, which is minimal and based on this tutorial series.
+
+Looking towards the future:
+
+* Part 3 will address adding React into the picture
+* Part 4 will cover more advanced webpack features
+
+Thank you for reading!
+
+[1]: https://github.com/thejameskyle/babel-handbook/blob/master/translations/en/user-handbook.md
+[2]: https://github.com/AriaFallah/WebpackTutorial/tree/master/part1
diff --git a/zh-TW/part2/example1/.babelrc b/zh-TW/part2/example1/.babelrc
new file mode 100644
index 0000000..0558174
--- /dev/null
+++ b/zh-TW/part2/example1/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "stage-2"]
+}
diff --git a/zh-TW/part2/example1/.eslintrc b/zh-TW/part2/example1/.eslintrc
new file mode 100644
index 0000000..eced3ad
--- /dev/null
+++ b/zh-TW/part2/example1/.eslintrc
@@ -0,0 +1,20 @@
+{
+  "extends": "airbnb/base",
+  "parser": "babel-eslint",
+  "rules": {
+    "comma-dangle": 0,
+    "no-console": 0,
+    "semi": [2, "never"],
+    "func-names": 0,
+    "space-before-function-paren": 0,
+    "no-multi-spaces": 0,
+    "babel/generator-star-spacing": 1,
+    "babel/new-cap": 1,
+    "babel/object-shorthand": 1,
+    "babel/arrow-parens": 1,
+    "babel/no-await-in-loop": 1
+  },
+  "plugins": [
+    "babel"
+  ]
+}
diff --git a/zh-TW/part2/example1/package.json b/zh-TW/part2/example1/package.json
new file mode 100644
index 0000000..6ae66e6
--- /dev/null
+++ b/zh-TW/part2/example1/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "example1",
+  "version": "1.0.0",
+  "description": "",
+  "main": "webpack.config.js",
+  "scripts": {
+    "build": "webpack --config webpack.config.prod.js",
+    "dev": "webpack-dev-server --config webpack.config.dev.js",
+    "lint": "eslint src"
+  },
+  "keywords": [],
+  "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",
+    "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",
+    "webpack-dev-server": "^1.14.1"
+  },
+  "dependencies": {
+    "pleasejs": "^0.4.2"
+  }
+}
diff --git a/zh-TW/part2/example1/src/index.html b/zh-TW/part2/example1/src/index.html
new file mode 100644
index 0000000..55fff75
--- /dev/null
+++ b/zh-TW/part2/example1/src/index.html
@@ -0,0 +1,10 @@
+<html>
+<head>
+  <title>Webpack Tutorial</title>
+</head>
+<body>
+  <h1>Very Website</h1>
+  <section id="color"></section>
+  <button id="button">Such Button</button>  
+</body>
+</html>
diff --git a/zh-TW/part2/example1/src/index.js b/zh-TW/part2/example1/src/index.js
new file mode 100644
index 0000000..fd95818
--- /dev/null
+++ b/zh-TW/part2/example1/src/index.js
@@ -0,0 +1,15 @@
+import Please from 'pleasejs' // use es6 module import
+require('./styles.css') // The page is now styled
+
+// Accept hot module reloading during development
+if (process.env.NODE_ENV !== 'production') {
+  if (module.hot) {
+    module.hot.accept()
+  }
+}
+
+const div = document.getElementById('color')
+const button = document.getElementById('button')
+const changeColor = () => div.style.backgroundColor = Please.make_color()
+
+button.addEventListener('click', changeColor)
diff --git a/zh-TW/part2/example1/src/styles.css b/zh-TW/part2/example1/src/styles.css
new file mode 100644
index 0000000..1982ab4
--- /dev/null
+++ b/zh-TW/part2/example1/src/styles.css
@@ -0,0 +1,19 @@
+h1 {
+  color: rgb(114, 191, 190);
+  text-align: center;
+}
+
+#color {
+  width: 300px;
+  height: 300px;
+  margin: 0 auto;
+}
+
+button {
+  cursor: pointer;
+  display: block;
+  width: 100px;
+  outline: 0;
+  border: 0;
+  margin: 20px auto;
+}
diff --git a/zh-TW/part2/example1/webpack.config.dev.js b/zh-TW/part2/example1/webpack.config.dev.js
new file mode 100644
index 0000000..2cae066
--- /dev/null
+++ b/zh-TW/part2/example1/webpack.config.dev.js
@@ -0,0 +1,38 @@
+/* eslint no-var: 0 */
+
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  devtool: 'cheap-eval-source-map',
+  entry: [
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/dev-server',
+    './src/index'
+  ],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }, {
+      test: /\.js$/,
+      loaders: ['babel'],
+      include: path.join(__dirname, 'src')
+    }]
+  },
+  devServer: {
+    contentBase: './dist',
+    hot: true
+  }
+}
diff --git a/zh-TW/part2/example1/webpack.config.prod.js b/zh-TW/part2/example1/webpack.config.prod.js
new file mode 100644
index 0000000..b984c05
--- /dev/null
+++ b/zh-TW/part2/example1/webpack.config.prod.js
@@ -0,0 +1,38 @@
+/* eslint no-var: 0 */
+
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  devtool: 'source-map',
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+      },
+    }),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    }),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loaders: ['style', 'css']
+    }, {
+      test: /\.js$/,
+      loaders: ['babel'],
+      include: path.join(__dirname, 'src')
+    }]
+  }
+}