Fix README-zh.md

README-zh.md

@@ -1,12 +1,12 @@
 ## 本教程的目标
 
-这是一本教你如何应用webpack到你的项目中的工具书。它包含了我们在`Instagram`中用到的绝大多数的内容。
+这是一本教你如何应用 webpack 到你的项目中的工具书。它包含了我们在 `Instagram` 中用到的绝大多数的内容。
 
-我的建议：这个教程作为你第一个`webpack`的文档，学习完以后去看它的官方文档，了解更详细的说明。
+我的建议：这个教程作为你第一个 `webpack` 的文档，学习完以后去看它的官方文档，了解更详细的说明。
 
 ## 学习的前提
 
-  * 你了解过类似`browserify`、`RequireJS`的东西
+  * 你了解过类似 `browserify`、`RequireJS` 的东西
   * 你知道:
   	* Bundle的拆分
   	* 异步的加载
@@ -15,14 +15,14 @@
 ## 1. 为什么选择 webpack?
 
 
-  * **它和browserify类似** 但是它可以把你的应用拆分成多个文件。如果你的单页应用里有很多页面，用户只会下载当前访问页面的代码。当他们访问应用中的其他页面时，不再需要加载与之前页面重复的通用代码。
-  * **它可以替代gulp和grunt** 因为他可以构建打包css、预处理css、编译js和图片等。
+  * **它和 browserify 类似** 但是它可以把你的应用拆分成多个文件。如果你的单页应用里有很多页面，用户只会下载当前访问页面的代码。当他们访问应用中的其他页面时，不再需要加载与之前页面重复的通用代码。
+  * **它可以替代 gulp 和 grunt** 因为他可以构建打包 css、预处理 css、编译 js和图片等。
 
-它支持AMD和CommonJS，以及其他的模块系统(Angular, ES6)。如果你不太熟悉如何使用，就用CommonJS吧。
+它支持 AMD 和 CommonJS，以及其他的模块系统（Angular, ES6）。如果你不太熟悉如何使用，就用 CommonJS 吧。
 
-## 2. 对于习惯Browserify的人可以这样使用Webpack
+## 2. 对于习惯 Browserify 的人可以这样使用 Webpack
 
-下面的命令是等价的:
+下面的命令是等价的：
 
 ```js
 browserify main.js > bundle.js
@@ -32,7 +32,7 @@ browserify main.js > bundle.js
 webpack main.js bundle.js
 ```
 
-然而，webpack要比Browserify强大。所以一般情况下你需要建立一个`webpack.config.js`文件来配置webpack。
+然而，webpack 要比 Browserify 强大。所以一般情况下你需要建立一个 `webpack.config.js` 文件来配置 webpack。
 
 ```js
 // webpack.config.js
@@ -44,11 +44,11 @@ module.exports = {
 };
 ```
 
-这就是单纯的JS，所有写这个配置文件毫无压力。
+这就是单纯的 JS，所有写这个配置文件毫无压力。
 
-## 3. 如何调用webpack
+## 3. 如何调用 webpack
 
-选择一个目录下有`webpack.config.js`文件的文件夹，然后运行下面的命令:
+选择一个目录下有 `webpack.config.js` 文件的文件夹，然后运行下面的命令：
 
   * `webpack` 开发环境下编译
   * `webpack -p` 产品编译及压缩
@@ -57,9 +57,9 @@ module.exports = {
 
 ## 4. 编译js
 
-webpack可以和browserify、RequireJS一样作为一个**loader**(加载工具)来使用。下面我们来看下如何使用webpack去加载、编译CoffeeScript和JSX+ES6。(这里你必须先 `npm install babel-loader coffee-loader`):
+webpack 可以和 browserify、RequireJS 一样作为一个 **loader**（加载工具）来使用。下面我们来看下如何使用 webpack 去加载、编译 CoffeeScript 和 JSX+ES6。（这里你必须先 `npm install babel-loader coffee-loader`）：
 
-你也要看下[babel-loader的介绍](https://www.npmjs.com/package/babel-loader)，它会作为一个开发环境下的依赖加载到我们的项目中(run `npm install babel-core babel-preset-es2015 babel-preset-react`)
+你也要看下 [babel-loader 的介绍](https://www.npmjs.com/package/babel-loader)，它会作为一个开发环境下的依赖加载到我们的项目中（run `npm install babel-core babel-preset-es2015 babel-preset-react`）。
 
 ```js
 // webpack.config.js
@@ -86,7 +86,7 @@ module.exports = {
 };
 ```
 
-如果你希望在require文件时省略文件的扩展名，只需要在webpack.config.js中添加 `resolve.extensions` 来配置。
+如果你希望在 require 文件时省略文件的扩展名，只需要在 webpack.config.js 中添加 `resolve.extensions` 来配置。
 
 ```js
 // webpack.config.js
@@ -116,7 +116,7 @@ module.exports = {
 
 ## 5. Css样式和图片的加载
 
-首先你需要用`require()`去加载你的静态资源(named as they would with node's `require()`):
+首先你需要用 `require()` 去加载你的静态资源（named as they would with node's `require()`）：
 
 ```js
 require('./bootstrap.css');
@@ -126,9 +126,9 @@ var img = document.createElement('img');
 img.src = require('./glyph.png');
 ```
 
-当你require了CSS(less或者其他)文件，webpack会在页面中插入一个内联的`<style>`，去引入样式。当require图片的时候，bundle文件会包含图片的url，并通过`require()`返回图片的url。
+当你 require 了 CSS（less 或者其他)文件，webpack 会在页面中插入一个内联的 `<style>`，去引入样式。当 require 图片的时候，bundle 文件会包含图片的 url，并通过 `require()` 返回图片的 url。
 
-但是这需要你在`webpack.config.js`做相应的配置(这里还是使用loaders)
+但是这需要你在 `webpack.config.js` 做相应的配置（这里还是使用 loaders）。
 
 ```js
 // webpack.config.js
@@ -163,7 +163,7 @@ if (__PRERELEASE__) {
 }
 ```
 
-同时还要在webpack.config.js中配置这些变量，使得webpack能够识别他们。
+同时还要在 webpack.config.js 中配置这些变量，使得 webpack 能够识别他们。
 
 ```js
 // webpack.config.js
@@ -183,12 +183,12 @@ module.exports = {
 };
 ```
 
-配置完成后，就可以使用 `BUILD_DEV=1 BUILD_PRERELEASE=1 webpack`来打包代码了。
+配置完成后，就可以使用 `BUILD_DEV=1 BUILD_PRERELEASE=1 webpack` 来打包代码了。
 值得注意的是，`webpack -p` 会删除所有无作用代码，也就是说那些包裹在这些全局变量下的代码块都会被删除，这样就能保证这些代码不会因发布上线而泄露。
 
 ## 7. 多个入口文件
 
-如果你有两个页面：profile和feed。如果你希望用户访问profile页面时不加载feed页面的代码，那就需要生成多个bundles文件：为每个页面创建自己的“main module”（入口文件）。
+如果你有两个页面：profile 和 feed。如果你希望用户访问 profile 页面时不加载 feed 页面的代码，那就需要生成多个 bundles 文件：为每个页面创建自己的“main module”（入口文件）。
 
 ```js
 // webpack.config.js
@@ -204,11 +204,11 @@ module.exports = {
 };
 ```
 
-在profile页面中插入`<script src="build/Profile.js"></script>`。feed也一样。
+在 profile 页面中插入`<script src="build/Profile.js"></script>`。feed 也一样。
 
 ## 8. 优化通用代码
 
-Feed和Profile页面存在大量通用代码(比如React、公共的样式和组件等等)。webpack可以抽离页面间公共的代码，生成一个公共的bundle文件，供这两个页面缓存使用:
+Feed 和 Profile 页面存在大量通用代码（比如 React、公共的样式和组件等等）。webpack 可以抽离页面间公共的代码，生成一个公共的 bundle 文件，供这两个页面缓存使用：
 
 ```js
 // webpack.config.js
@@ -231,11 +231,11 @@ module.exports = {
 };
 ```
 
-在上一步引入自己的bundle之前引入`<script src="build/common.js"></script>`
+在上一步引入自己的 bundle 之前引入`<script src="build/common.js"></script>`
 
 ## 9. 异步加载
 
-虽然CommonJS是同步加载的，但是webpack也提供了异步加载的方式。这对于单页应用中使用的客户端路由非常有用。当真正路由到了某个页面的时候，它的代码才会被加载下来。
+虽然 CommonJS 是同步加载的，但是 webpack 也提供了异步加载的方式。这对于单页应用中使用的客户端路由非常有用。当真正路由到了某个页面的时候，它的代码才会被加载下来。
 
 指定你要异步加载的 **拆分点**。看下面的例子
 
@@ -255,9 +255,9 @@ if (window.location.pathname === '/feed') {
 }
 ```
 
-剩下的事就可以交给webpack，它会为你生成并加载这些额外的 **chunk** 文件。
+剩下的事就可以交给 webpack，它会为你生成并加载这些额外的 **chunk** 文件。
 
-webpack 默认会从项目的根目录下引入这些chunk文件。你也可以通过 `output.publicPath`来配置chunk文件的引入路径
+webpack 默认会从项目的根目录下引入这些 chunk 文件。你也可以通过 `output.publicPath` 来配置 chunk 文件的引入路径。
 
 ```js
 // webpack.config.js
@@ -269,10 +269,10 @@ output: {
 
 ## 其他
 
-看一个真实的例子，[看看他们是怎么使用webpack](http://youtu.be/VkTCL6Nqm6Y)。这是Pete Hunt在Instagram.com中谈论webpack的视频。
+看一个真实的例子，[看看他们是怎么使用 webpack](http://youtu.be/VkTCL6Nqm6Y)。这是 Pete Hunt 在 Instagram.com 中谈论 webpack 的视频。
 
 ## FAQ
 
-### webpack 不仅仅是个modular
+### webpack 不仅仅是个 modular
 
-相比较browserify和browserify，在你的项目中大量的使用webpack插件才能体现出webpack的优势。当使用了插件后，代码才会被复写。其余的都是默认加载。
+相比较 browserify 和 requirejs，在你的项目中大量的使用 webpack 插件才能体现出 webpack 的优势。当使用了插件后，代码才会被复写。其余的都是默认加载。