Merge pull request webpack#5 from webpack-china/cn

merge from webpack-china

Author: lcxfs1991

antwar.config.js

@@ -191,7 +191,7 @@ function root(contentCb) {
   };
 }
 
-function section(title, contentCb) {
+function section(title, contentCb, redirects = {}) {
   return {
     title: title,
     path: function() {
@@ -209,7 +209,7 @@ function section(title, contentCb) {
         return require('./components/page/page.jsx').default
       }
     },
-    redirects: {} // <from>: <to>
+    redirects: redirects // <from>: <to>
   };
 }
 

components/splash-viz/splash-viz-style.scss

@@ -1,13 +1,14 @@
 @import 'functions';
+@import 'vars';
 @import 'mixins';
 
 .splash-viz {
-  position:relative;
-  display:flex;
-  height:calc(100vh - 55px);
-  min-height:320px;
-  max-height:720px;
-  background:getColor(elephant);
+  position: relative;
+  display: flex;
+  height: calc(100vh - 55px);
+  min-height: 320px;
+  max-height: 720px;
+  background: getColor(elephant);
   flex-direction: column;
 
   &__heading {
@@ -28,8 +29,9 @@
     right: 0;
     top: 0;
     bottom: 0;
-    width: 65vw;
+    width: 75vw;
     min-width: 550px;
+    max-width: map-get($screens, large);
     margin: auto;
     display: none;
 

content/api/cli.md

@@ -90,7 +90,7 @@ module.exports = {
 require('style-loader!css-loader?modules!./styles.css');
 ```
 
-通过前置整个规则及使用 `!`，可以覆盖到配置中的任意 loader。
+通过前置所有规则及使用 `!`，可以对应覆盖到配置中的任意 loader。
 
 选项可以传递查询参数，就像在 web 中那样（`?key=value&foo=bar`）。也可以使用 JSON 对象（`?{"key":"value","foo":"bar"}`）。
 
@@ -108,24 +108,24 @@ webpack --module-bind jade --module-bind 'css=style!css'
 
 ## Loader 特性
 
-* loader 支持链式传递。能够对资源使用流水线( pipeline)。loader 链式按照时间先后顺序进行编译。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，webpack 按照预期的 JavaScript 返回。
+* loader 支持链式传递。能够对资源使用流水线(pipeline)。loader 链式地按照先后顺序进行编译。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
 * loader 可以是同步或异步函数。
 * loader 运行在 Node.js 中，并且能够执行任何可能的操作。
 * loader 接收查询参数。用于 loader 间传递配置。
 * loader 也能够使用 `options` 对象进行配置。
-* 除了直接使用 `package.json` 的 `main` 属性，还可以将普通的 npm 模块导出为 loader，做法是在 `package.json` 里定义一个 loader 字段。
-* 插件可以给 loader 带来更多功能。
+* 除了使用 `package.json` 常见的 `main` 属性，还可以将普通的 npm 模块导出为 loader，做法是在 `package.json` 里定义一个 loader 字段。
+* 插件(plugin)可以为 loader 带来更多特性。
 * loader 能够产生额外的任意文件。
 
-loader 通过 loader 预处理函数，为 JavaScript 生态系统提供了更多有力功能。用户现在可以更加灵活的引入细粒度逻辑，例如压缩、打包、语言翻译和[其他更多](/loaders)。
+loader 通过（loader）预处理函数，为 JavaScript 生态系统提供了更多有力功能。用户现在可以更加灵活的引入细粒度逻辑，例如压缩(compression)、打包(package)、语言翻译(language translation)和[其他更多](/loaders)。
 
 ## 解析 Loader
 
 loader 遵循标准的[模块解析](/concepts/module-resolution/)。多数情况下，loader 将从[模块路径](/concepts/module-resolution/#module-paths)（通常将模块路径认为是 `npm install`, `node_modules`）解析。
 
-[如何编写模块？](/development/how-to-write-a-loader)loader 模块需要导出为一个函数，并且使用 Node.js 兼容的 JavaScript 编写。在多数情况下，你会使用 npm 来管理 loader，但是你也可以将应用程序中的文件作为 loader。
+[如何编写模块？](/development/how-to-write-a-loader)loader 模块需要导出为一个函数，并且使用 Node.js 兼容的 JavaScript 编写。在通常情况下，你会使用 npm 来管理 loader，但是你也可以将 loader 模块作为应用程序中的文件。
 
-按照约定，loader 通常被命名为 `XXX-loader`，`XXX` 是上下文的名称，例如 `json-loader`。
+按照约定，loader 通常被命名为 `XXX-loader`，其中 `XXX` 是上下文的名称，例如 `json-loader`。
 
 loader 的名称约定和优先搜索顺序，由 webpack 配置 API 中的  [`resolveLoader.moduleTemplates`](/configuration/resolve#resolveloader) 定义。
 

content/api/loaders.md

@@ -10,11 +10,11 @@ contributors:
 
 插件是 wepback 的[支柱](https://github.com/webpack/tapable)功能。在你使用 webpack 配置时，webpack 自身也构建于**同样的插件系统**上！
 
-插件目的在于解决 [loader](/concepts/loaders) 无法实现的其他事。
+插件目的在于解决 [loader](/concepts/loaders) 无法实现的**其他事**。
 
 ## 剖析
 
-webpack **插件**是一个具有 [`apply`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) 属性的 JavaScript 对象。 `apply` 属性会被 webpack 解析器(compiler)调用，并且可在整个编译生命周期(compilation lifecycle)访问。
+webpack **插件**是一个具有 [`apply`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) 属性的 JavaScript 对象。 `apply` 属性会被 webpack compiler 调用，并且 compiler 对象可在**整个** compilation 生命周期访问。
 
 
 **ConsoleLogOnBuildWebpackPlugin.js**
@@ -26,20 +26,20 @@ function ConsoleLogOnBuildWebpackPlugin() {
 
 ConsoleLogOnBuildWebpackPlugin.prototype.apply = function(compiler) {
   compiler.plugin('run', function(compiler, callback) {
-    console.log("The webpack build process is starting!!!");
+    console.log("webpack 构建过程开始！！！");
 
     callback();
   });
 };
 ```
 
-T> 作为一个聪明的 JavaScript 开发者，你可能还记得 `Function.prototype.apply` 方法。通过这个方法你可以把任意函数作为插件传递（`this` 将指向 `compiler`）。你可以在你的配置中使用内联样式的自定义插件。
+T> 作为一个聪明的 JavaScript 开发者，你可能还记得 `Function.prototype.apply` 方法。通过这个方法你可以把任意函数作为插件传递（`this` 将指向 `compiler`）。你可以在配置中使用这样的方式来内联自定义插件。
 
 ## 用法
 
-由于**插件**可以接收参数/选项，你必须在wepback配置中，向 `plugins` 属性传入 `new` 实例。
+由于 **plugin** 可以携带参数/选项，你必须在 wepback 配置中，向 `plugins` 属性传入 `new` 实例。
 
-基于您如何使用 webpack，有多种使用插件的方式。
+根据你如何使用 webpack，这里有多种方式使用插件。
 
 ### 配置
 
@@ -91,7 +91,7 @@ module.exports = config;
   });
 ```
 
-T> 你知道吗：以上看到的例子和 [webpack 本身运行时](https://github.com/webpack/webpack/blob/e7087ffeda7fa37dfe2ca70b5593c6e899629a2c/bin/webpack.js#L290-L292)极其类似。[wepback 源码](https://github.com/webpack/webpack)中隐藏有大量使用示例，你可以应用到自己的配置和脚本中。
+T> 你知道吗：以上看到的示例和 [webpack 自身运行时(runtime)](https://github.com/webpack/webpack/blob/e7087ffeda7fa37dfe2ca70b5593c6e899629a2c/bin/webpack.js#L290-L292) 极其类似。[wepback 源码](https://github.com/webpack/webpack)中隐藏有大量使用示例，你可以用在自己的配置和脚本中。
 
 ***
 

content/concepts/loaders.md

@@ -38,7 +38,7 @@ content is served from dist/
 
 这将给出一些背景知识，就能知道服务器的访问位置，并且知道服务已启动。
 
-如果你通过 Node.js API 来使用 dev-server， `devServer` 中的选项将被忽略。将选项作为第二个参数传入： `new WebpackDevServer(compiler, {...})`。
+如果你通过 Node.js API 来使用 dev-server， `devServer` 中的选项将被忽略。将选项作为第二个参数传入： `new WebpackDevServer(compiler, {...})`。关于如何通过 Node.js API 使用 webpack-dev-server 的示例，请[查看此处](https://github.com/webpack/webpack-dev-server/blob/master/examples/node-api-simple/server.js)。
 
 
 ## `devServer.clientLogLevel`

content/concepts/plugins.md

@@ -0,0 +1,53 @@
+---
+title: 环境(Environment)
+contributors:
+  - simon04
+---
+
+最终，你会发现需要在[开发](/guides/development)和[生产构建](/guides/production-build)之间，消除 `webpack.config.js` 的差异。你（至少）需要两个选项：
+
+## 使用 `--env`
+
+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 // 只在生产环境构建时压缩
+      })
+    ]
++  };
+};
+```
+
+## 使用环境变量
+
+或者，可以使用 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
+module.exports = {
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
++      compress: process.env.NODE_ENV === 'production'
+    })
+  ]
+};
+```
+
+使用 [`cross-env`](https://www.npmjs.com/package/cross-env) 包来跨平台设置(cross-platform-set)环境变量：
+
+**package.json**
+```json
+{
+  "scripts": {
+    "build": "cross-env NODE_ENV=production PLATFORM=web webpack"
+  }
+}
+```
+
+## References
+* https://blog.flennik.com/the-fine-art-of-the-webpack-2-config-dc4d19d7f172#.297u8iuz1

content/configuration/dev-server.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/environment.md

@@ -140,7 +140,7 @@ parser: {
   amd: false, // 禁用 AMD
   commonjs: false, // 禁用 CommonJS
   system: false, // 禁用 SystemJS
-  harmony: false, // 禁用 ES6 Harmony import/export
+  harmony: false, // 禁用 ES2015 Harmony import/export
   requireInclude: false, // 禁用 require.include
   requireEnsure: false, // 禁用 require.ensure
   requireContext: false, // 禁用 require.context

content/configuration/external-configs.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,9 +22,40 @@ plugins: [
 ]
 ```
 
-A more complex example, using multiple plugins, might look something like this:
+一个复杂示例，使用多个插件，可能看起来就像这样：
+```js
+// 导入非 webpack 默认自带插件
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var DashboardPlugin = require('webpack-dashboard/plugin');
 
-?> Add a more detailed example
+// 在配置中添加插件
+plugins: [
+  // 构建优化插件
+  new webpack.optimize.CommonsChunkPlugin({
+    name: 'vendor',
+    filename: 'vendor-[hash].min.js',
+  }),
+  new webpack.optimize.UglifyJsPlugin({
+    minimize: true,
+    compress: {
+      warnings: false,
+      drop_console: false,
+    }
+  }),
+  new ExtractTextPlugin({
+    filename: 'build.min.css',
+    allChunks: true,
+  }),
+  new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),
+  // 编译时(compile time)插件
+  new webpack.DefinePlugin({
+    'process.env.NODE_ENV': '"production"',
+  }),
+  // webpack-dev-server 强化插件
+  new DashboardPlugin(),
+  new webpack.HotModuleReplacementPlugin(),
+]
+```
 
 ***