MERGE Simplified Chinese translation (#45)

Author: AriaFallah

README.md

@@ -8,3 +8,4 @@ intro to webpack.
 
 ### Translations
 - [Chinese Traditional](https://github.com/AriaFallah/WebpackTutorial/tree/master/zh-TW)
+- [简体中文](https://github.com/AriaFallah/WebpackTutorial/tree/master/zh-cn)

zh-TW/part1/README.md

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

zh-TW/part2/README.md

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

zh-cn/README.md

@@ -0,0 +1,6 @@
+# Webpack 初学者教学课程 :school:
+
+Webpack 刚开始对我来说是很困难的，所以我想要建立一个对初学者友善，而且对 webpack 有着非常全面的介绍教学。
+
+- [Part 1](https://github.com/neighborhood999/WebpackTutorial/tree/master/zh-TW/part1) - Webpack 基础和配置。
+- [Part 2](https://github.com/neighborhood999/WebpackTutorial/tree/master/zh-TW/part2) - Babel、Lint、以及环境变数。