Merge remote-tracking branch 'origin/cn' into cn

Author: dear-lizhihua

content/configuration/environment.md

@@ -1,31 +1,31 @@
 ---
-title: Environment
+title: 环境(Environment)
 contributors:
   - simon04
 ---
 
-Eventually you will find the need to disambiguate in your `webpack.config.js` between [development](/guides/development) and [production builds](/guides/production-build). You have (at least) two options:
+最终，你会发现需要在[开发](/guides/development)和[生产构建](/guides/production-build)之间，消除 `webpack.config.js` 的差异。你（至少）需要两个选项：
 
-## Using `--env`
+## 使用 `--env`
 
-The webpack CLI support specifying build environment keys via `--cli` such as `--env.production` or `--env.platform=web`. To make use of those settings, change the configuration object into a function in `webpack.config.js`:
+webpack CLI 支持通过 `--cli` 指定构建环境键(build environment key)（如 `--env.production` 或 `--env.platform=web`）。要使用这些设置，请将 `webpack.config.js` 中的配置对象(configuration object)更改为一个函数：
 
 ```diff
 -module.exports = {
 +module.exports = function(env) {
 +  return {
     plugins: [
       new webpack.optimize.UglifyJsPlugin({
-+        compress: env.production // compress only in production build
++        compress: env.production // 只在生产环境构建时压缩
       })
     ]
 +  };
 };
 ```
 
-## Using environment variables
+## 使用环境变量
 
-Alternatively, the standard approach in Node.js modules can be applied: Set an environment variable when running webpack and refer to the variables using Node's [`process.env`](https://nodejs.org/api/process.html#process_process_env). The variable `NODE_ENV` is commonly used as de-facto standard (see [here](https://dzone.com/articles/what-you-should-know-about-node-env)).
+或者，可以使用 Node.js 中的标准方式：在运行 webpack 时设置环境变量，并且使用 Node.js 的 [`process.env`](https://nodejs.org/api/process.html#process_process_env) 引用变量。`NODE_ENV` 变量通常被视为事实标准（查看[这里](https://dzone.com/articles/what-you-should-know-about-node-env)）。
 
 **webpack.config.js**
 ```diff
@@ -38,7 +38,7 @@ module.exports = {
 };
 ```
 
-Use the [`cross-env`](https://www.npmjs.com/package/cross-env) package to cross-platform-set environment variables:
+使用 [`cross-env`](https://www.npmjs.com/package/cross-env) 包来跨平台设置(cross-platform-set)环境变量：
 
 **package.json**
 ```json

content/configuration/external-configs.md

@@ -7,9 +7,9 @@ contributors:
   - tarang9211
 ---
 
-webpack lets you define you configuration files in any language. The list of supported file extensions can be found at the [node-interpret](https://github.com/js-cli/js-interpret) package. webpack with the help of [node-interpret](https://github.com/js-cli/js-interpret) will run your configuration through the language of your choice.
+webpack 允许使用任意语言定义配置文件。文件扩展支持列表 [node-interpret](https://github.com/js-cli/js-interpret) 包中找到。webpack 将通过你选择的语言运行你的配置。
 
-For example if you use **coffeescript**, your file would be as follows:
+例如，如果你使用 **coffeescript**，你的文件将如下所示：
 
 **webpack.config.coffee**
 

content/configuration/plugins.md

@@ -12,7 +12,7 @@ contributors:
 
 `array`
 
-A list of webpack plugins. For example, when multiple bundles share some of the same dependencies, the `CommonsChunkPlugin` could be useful to extract those dependencies into a shared bundle to avoid duplication. This could be added like so:
+webpack 插件列表。例如，当多个 bundle 共享一些相同的依赖，`CommonsChunkPlugin` 有助于提取这些依赖到共享的 bundle 中，来避免重复打包。可以像这样添加：
 
 ```js
 plugins: [
@@ -22,15 +22,15 @@ plugins: [
 ]
 ```
 
-A more complex example, using multiple plugins, might look something like this:
+一个复杂示例，使用多个插件，可能看起来就像这样：
 ```js
-// importing plugins that do not come by default in webpack
+// 导入非 webpack 默认自带插件
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var DashboardPlugin = require('webpack-dashboard/plugin');
 
-// adding plugins to your configuration
+// 在配置中添加插件
 plugins: [
-  // build optimization plugins
+  // 构建优化插件
   new webpack.optimize.CommonsChunkPlugin({
     name: 'vendor',
     filename: 'vendor-[hash].min.js',
@@ -47,11 +47,11 @@ plugins: [
     allChunks: true,
   }),
   new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),
-  // compile time plugins
+  // 编译时(compile time)插件
   new webpack.DefinePlugin({
     'process.env.NODE_ENV': '"production"',
   }),
-  // webpack-dev-server enhancement plugins
+  // webpack-dev-server 强化插件
   new DashboardPlugin(),
   new webpack.HotModuleReplacementPlugin(),
 ]

content/configuration/stats.md

@@ -10,7 +10,7 @@ contributors:
 
 T> 对于 webpack-dev-server ，这个属性要放在 `devServer` 对象里。
 
-W> This option does not have any effect when using the Node.js API.
+W> 在使用 Node.js API 后，此选项无效。
 
 ## `stats`
 

content/development/how-to-write-a-loader.md

@@ -1,5 +1,5 @@
 ---
-title: How to write a loader?
+title: 如何编写一个 loader？(How to write a loader?)
 sort: 3
 ---
 

content/development/how-to-write-a-plugin.md

@@ -1,5 +1,5 @@
 ---
-title: 如何编写一个插件？
+title: 如何编写一个插件？(How to write a plugin?)
 sort: 2
 ---
 

content/development/index.md

@@ -1,5 +1,5 @@
 ---
-title: Development
+title: 开发(Development)
 ---
 
 这些指南涵盖了开发 webpack 所需要了解的内容。内容还在制作中！

content/development/plugin-patterns.md

@@ -1,5 +1,5 @@
 ---
-title: 有用的插件模式
+title: 有用的插件模式(Useful Plugin Patterns)
 sort: 2
 ---
 

content/development/release-process.md

@@ -1,5 +1,5 @@
 ---
-title: webpack 合入，标签和发布流程
+title: webpack 合并、标记和发布流程(webpack merge, tag and release process)
 contributors:
   - d3viant0ne
   - sokra

content/guides/production-build.md

@@ -1,29 +1,28 @@
 ---
 title: 生产环境构建
-sort: 40
+sort: 13
 contributors:
   - henriquea
   - rajagopal4890
   - markerikson
   - simon04
   - kisnows
-  - chrisVillanueva
-  - swapnilmishra
+  - muchen
 ---
 
-此页解释了如何使用 webpack 生成用于生产环境的 build。
+该页面说明了如何通过`webpack`生成生产环境所用的文件。
 
-## The automatic way
+## 自动方式
 
-Running `webpack -p` (or equivalently `webpack --optimize-minimize --define process.env.NODE_ENV="'production'"`). This performs the following steps:
+运行`webpack -p` (也可以运行 `webpack --optimize-minimize --define process.env.NODE_ENV="'production'"`, 他们是等效的). 它会执行如下步骤:
 
-- Minification using `UglifyJsPlugin`
-- Runs the `LoaderOptionsPlugin`, see its [documentation](/plugins/loader-options-plugin)
-- Sets the Node environment variable
+- 使用`UglifyJsPlugin`进行 JS文件压缩
+- 运行`LoaderOptionsPlugin`, 详情见[文档](/plugins/loader-options-plugin)
+- 设置Node环境变量
 
-### Minification
+### JS文件压缩
 
-webpack 自带了 `UglifyJsPlugin`，它运行 [UglifyJS](http://lisperator.net/uglifyjs/) 来最小化输出文件。此插件支持所有的 [UglifyJS 选项](https://github.com/mishoo/UglifyJS2#usage)。在命令行中指定 `--optimize-minimize`，会在 plugins 配置中添加：
+webpack 自带了 `UglifyJsPlugin`，它运行 [UglifyJS](http://lisperator.net/uglifyjs/) 来压缩输出文件。此插件支持所有的 [UglifyJS 选项](https://github.com/mishoo/UglifyJS2#usage)。在命令行中指定 `--optimize-minimize`，会在 plugins 配置中添加：
 
 
 ```js
@@ -39,20 +38,19 @@ module.exports = {
   ]
 };
 ```
-
-Thus, depending on the [devtool options](/configuration/devtool), Source Maps are generated.
+因此,通过设置[devtool options](/configuration/devtool)可以生成Source Maps.
 
 ### Source Maps
 
-We encourage you to have Source Maps enabled in production. They are useful for debugging and to run benchmark tests. webpack can generate inline Source Maps included in the bundles or separated files.
+我们推荐你在生产环境中使用Source Maps。Source Maps对DEBUG和跑基准测试十分有用。Webpack可以在bundle与独立文件内生成内联的Source Maps。
 
-In your configuration, use the `devtool` object to set the Source Map type. We currently support seven types of Source Maps. You can find more information about them in our [configuration](/configuration/devtool) documentation page.
+在你的配置中,使用`devtool`对象来设置Source Maps的类型。我们现在支持7种类型的Source Maps。你可以在[devtool设置](/configuration/devtool)文档页面找到更多相关的信息。
 
-One of the good options to go is using `cheap-module-source-map` which simplifies the Source Maps to a single mapping per line.
+其中一个好的选项就是使用`cheap-module-source-map`。这能够简化Source Maps为对于每一行的单一映射.
 
-### Node environment variable
+### Node环境变量
 
-Running `webpack -p` (or `--define process.env.NODE_ENV="production"`) invokes the [`DefinePlugin`](/plugins/define-plugin) in the following way:
+运行 `webpack -p` (或者 `--define process.env.NODE_ENV="production"`) 会通过如下方式调用[`DefinePlugin`](/plugins/define-plugin) :
 
 ```js
 // webpack.config.js
@@ -68,14 +66,13 @@ module.exports = {
 };
 ```
 
-The `DefinePlugin` performs search-and-replace operations on the original source code. Any occurrence of `process.env.NODE_ENV` in the imported code is replaced by by `"production"`. Thus, checks like `if (process.env.NODE_ENV !== 'production') console.log('...')` are evaluated to `if (false) console.log('...')` and finally minified away using `UglifyJS`.
+`DefinePlugin` 在原始的源码中执行查找和替换操作. 在导入的代码中,任何出现 `process.env.NODE_ENV`的地方都会被替换为`"production"`. 因此, 形如`if (process.env.NODE_ENV !== 'production') console.log('...')` 的代码就会等价于 `if (false) console.log('...')` 并且最终通过`UglifyJS`等价替换掉.
 
-T> Technically, `NODE_ENV` is a system environment variable that Node.js exposes into running scripts. It is used by convention to determine development-vs-production behavior, by both server tools, build scripts, and client-side libraries. Contrary to expectations, `process.env.NODE_ENV` is not set to `"production"` __within__ the build script `webpack.config.js`, see [#2537](https://github.com/webpack/webpack/issues/2537). Thus, conditionals like `process.env.NODE_ENV === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js'` do not work as expected. See how to specify the [environment in webpack configuration](/configuration/environment).
+T> 从技术角度而言, `NODE_ENV`是一个Node.js暴露给运行脚本的系统环境变量。服务端的工具/构建脚本以及客户端库都可以方便的使用该环境变量确定自己的开发-生产行为。 然而与期望的相反, 构建脚本`webpack.config.js`中的`process.env.NODE_ENV` 并不会被设置为 `"production"` , 详情见[#2537](https://github.com/webpack/webpack/issues/2537). 因此, 条件判定,形如 `process.env.NODE_ENV === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js'` 并不会按预想的起作用.
 
-## The manual way: Configuring webpack for multiple environments
+## 手动方式: 为多环境配置Webpack
 
-When we do have multiple configurations in mind for different environments, the easiest way is to write separate js files for
-each environment. For example:
+当我们确实有为针对多种环境而分别配置的需求时,最简单的方式就是为不同的环境编写独立的js文件,例如:
 
 ** dev.js **
 ```js
@@ -115,7 +112,7 @@ module.exports = function (env) {
             minimize: true,
             debug: false
         }),
-        new webpack.optimize.UglifyJsPlugin({
+        new UglifyJsPlugin({
             beautify: false,
             mangle: {
                 screw_ie8: true,
@@ -130,26 +127,23 @@ module.exports = function (env) {
   }
 }
 ```
-Have the following snippet in your webpack.config.js:
+在我们的webpack.config.js中加入如下的代码片段:
 ```js
 function buildConfig(env) {
   return require('./config/' + env + '.js')({ env: env })
 }
 
-module.exports = buildConfig;
+module.exports = buildConfig(env);
 ```
-And from our package.json, where we build our application using webpack, the command goes like this:
+在package.json文件中我们使用webpack构建我们的应用，所需需要在package.json中添加以下命令:
 ```js
  "build:dev": "webpack --env=dev --progress --profile --colors",
  "build:dist": "webpack --env=prod --progress --profile --colors",
 ```
+可以看到,我们给把环境变量传递给了webpack.config.js文件. 在这里我们使用一个简单的switch-case载入正确的JS文件，来做到针对不同的环境进行构建.
 
-You could see that we passed the environment variable to our webpack.config.js file. From there we used a simple
-switch-case to build for the environment we passed by simply loading the right js file.
-
-An advanced approach would be to have a base configuration file, put in all common functionalities,
-and then have environment specific files and simply use 'webpack-merge' to merge them. This would help to avoid code repetitions.
-For example, you could have all your base configurations like resolving your js, ts, png, jpeg, json and so on.. in a common base file as follows:
+一个高阶的方式是编写一个基本配置文件,把所有公用的功能放在里面。再编写特定环境的文件,使用'webpack-merge'来合并他们.这样能够避免代码重复.
+你可以把所有的基本配置,如处理js, ts, png, jpeg, json等文件的配置放在公用的`base`文件中.代码样例如下:
 
 ** base.js **
 ```js
@@ -205,8 +199,8 @@ module.exports = function() {
     };
 }
 ```
-And then merge this base config with an environment specific configuration file using 'webpack-merge'.
-Let us look at an example where we merge our prod file, mentioned above, with this base config file using 'webpack-merge':
+然后,使用'webpack-merge'合并这个基础配置和针对环境的特定的配置。
+让我们看一个简单的样例,在这个样例中我们使用'webpack-merge'将上文中提及的`prod`文件与基础配置文件进行合并:
 
 ** prod.js (updated) **
 ```js
@@ -241,15 +235,14 @@ module.exports = function(env) {
     })
 }
 ```
-You will notice three major updates to our 'prod.js' file.
-* 'webpack-merge' with the 'base.js'.
-* We have move 'output' property to 'base.js'. Just to stress on that point that our output property, here, is common across all our environments and that we refactored our 'prod.js' and moved it to our 'base.js', the common configuration file.
-* We have defined the 'process.env.NODE_ENV' to be 'prod' using the 'DefinePlugin'. Now across the application 'process.env.NODE_ENV' would have the value, 'prod', when we build our application for production environment. Likewise we can manage various variables of our choice, specific to environments this way.
-
-The choice of what is going to be common across all your environments is up to you, however. We have just demonstrated a few that could typically be common across environments when we build our application.
+你会注意到'prod.js'文件三点主要的变化.
+* 使用'webpack-merge'合并'base.js'.
+* 我们把'output'属性挪到了'base.js'文件. 需要强调的是此处我们从`prod.js`抽取出来到`base.js`文件的'output'属性是公用的,贯穿所有的环境的,才把它抽取出来.
+* 我们使用'DefinePlugin'把'process.env.NODE_ENV'定义为'prod'. 当我们构建生产环境的应用时,整个应用中的'process.env.NODE_ENV'都会是这个值——'prod'. 像这样,我们可以管理我们选择指定的针对不同环境的不同变量.
 
-You just saw, how powerful 'webpack-merge' is, that, it just saved us from a lot of code repetitions.
+选择哪些配置是贯穿所有环境的取决于你.然而,当我们构建应用的时候,我们已经演示了一些典型的能所有环境通用的配置.
+你刚看到了,'webpack-merge'是如此的强大,它能够把我们从大量的代码重复中解救出来.
 
 ***
 
-> 原文：https://webpack.js.org/guides/production-build/
+> 原文：https://webpack.js.org/guides/production-build/