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')
+    }]
+  }
+}