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

dear-lizhihua · dear-lizhihua · commit 609f5ffe312f · 2017-02-09T14:10:33.000+08:00
diff --git a/components/splash-viz/splash-viz-style.scss b/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;
 
diff --git a/content/configuration/target.md b/content/configuration/target.md
@@ -20,9 +20,9 @@ webpack 能够为多种环境或 _target_ 构建编译。想要理解什么是 t
 | `target`      | 描述            |
 | ------------- |------------------------|
 | `async-node`| 编译为类 Node.js 环境可用（使用 fs 和 vm 异步加载分块）    |
-| `electron`      | 编译为 [Electron](http://electron.atom.io/) 渲染进程，使用 `JsonpTemplatePlugin`, `FunctionModulePlugin` 来为浏览器环境提供目标，使用 `NodeTargetPlugin` 和 `ExternalsPlugin` 为 CommonJS 和 Electron 内置模块提供目标。 |
-| `electron-renderer` | 为 [Electron](http://electron.atom.io/) 的 `renderer-process` 编译。  |
-| `"node"` | 编译为类 Node.js 环境可用（使用 Node.js `require` 加载分块） |
+| `electron`      | `electron-main` 的别名 |
+| `electron-main`      | 编译为 [Electron](http://electron.atom.io/) 渲染进程，使用 `JsonpTemplatePlugin`, `FunctionModulePlugin` 来为浏览器环境提供目标，使用 `NodeTargetPlugin` 和 `ExternalsPlugin` 为 CommonJS 和 Electron 内置模块提供目标。 |
+| `node` | 编译为类 Node.js 环境可用（使用 Node.js `require` 加载 chunk） |
 |`node-webkit`|  编译为 Webkit 可用，并且使用 jsonp 去加载分块。支持 Node.js 内置模块和 [`nw.gui`](http://docs.nwjs.io/en/latest/) 导入（实验性质） |
 |`web`| 编译为类浏览器环境里可用**（默认）** |
 |`webworker`| 编译成一个 WebWorker |
diff --git a/content/guides/tree-shaking.md b/content/guides/tree-shaking.md
@@ -2,9 +2,10 @@
 title: Tree Shaking
 contributors:
   - simon04
+  - zacanger
 ---
 
-_Tree shaking_ is a term commonly used in the JavaScript context for dead-code elimination, or more precisely, life-code import. It relies on ES6 module [import](https://developer.mozilla.org//en-US/docs/Web/JavaScript/Reference/Statements/import)/[export](https://developer.mozilla.org//en-US/docs/Web/JavaScript/Reference/Statements/export) for the [static structure](http://exploringjs.com/es6/ch_modules.html#static-module-structure) of its module system. The name and concept have been popularized by the ES6 module bundler [rollup](https://github.com/rollup/rollup).
+_Tree shaking_ is a term commonly used in the JavaScript context for dead-code elimination, or more precisely, live-code import. It relies on ES6 module [import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)/[export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) for the [static structure](http://exploringjs.com/es6/ch_modules.html#static-module-structure) of its module system. The name and concept have been popularized by the ES6 module bundler [rollup](https://github.com/rollup/rollup).
 
 webpack 2 comes with a built-in support for ES6 modules (alias *harmony modules*) as well as unused module export detection.
 
diff --git a/content/plugins/commons-chunk-plugin.md b/content/plugins/commons-chunk-plugin.md
@@ -58,7 +58,7 @@ T> The deprecated webpack 1 constructor `new webpack.optimize.CommonsChunkPlugin
 Generate an extra chunk, which contains common modules shared between entry points.
 
 ```javascript
-new CommonsChunkPlugin({
+new webpack.optimize.CommonsChunkPlugin({
   name: "commons",
   // (the commons chunk name)
 
@@ -89,7 +89,7 @@ entry: {
   vendor: ["jquery", "other-lib"],
   app: "./entry"
 }
-new CommonsChunkPlugin({
+new webpack.optimize.CommonsChunkPlugin({
   name: "vendor",
 
   // filename: "vendor.js"
@@ -113,7 +113,7 @@ Hint: In combination with long term caching you may need to use the [`ChunkManif
 With Code Splitting multiple child chunks of a chunk can have common modules. You can move these common modules into the parent (This reduces overall size, but has a negative effect on the initial load time. It can be useful if it is expected that a user need to download many sibling chunks).
 
 ```javascript
-new CommonsChunkPlugin({
+new webpack.optimize.CommonsChunkPlugin({
   // names: ["app", "subPageA"]
   // (choose the chunks, or omit for all chunks)
 
@@ -130,7 +130,7 @@ new CommonsChunkPlugin({
 Similar to the above one, but instead of moving common modules into the parent (which increases initial load time) a new async-loaded additional commons chunk is used. This is automatically downloaded in parallel when the additional chunk is downloaded.
 
 ```javascript
-new CommonsChunkPlugin({
+new webpack.optimize.CommonsChunkPlugin({
   // names: ["app", "subPageA"]
   // (choose the chunks, or omit for all chunks)
 
@@ -156,7 +156,7 @@ The `count` property represents how many chunks the `module` is used in.
 This option is useful when you want to have fine-grained control over how the CommonsChunk algorithm determins where modules should be moved to.
 
 ```javascript
-new CommonsChunkPlugin({
+new webpack.optimize.CommonsChunkPlugin({
   name: "my-single-lib-chunk",
   filename: "my-single-lib-chunk.js",
   minChunks: function(module, countOfHowManyTimesThisModuleIsUsedAcrossAllChunks) {
diff --git a/content/plugins/define-plugin.md b/content/plugins/define-plugin.md
@@ -1,13 +1,15 @@
 ---
 title: DefinePlugin
+contributurs:
+  - simon04
 ---
 
 ``` javascript
 new webpack.DefinePlugin(definitions)
 ```
 
 允许你创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。比如,你可能会用一个全局的常量来决定 log 在开发模式触发而不是发布模式。这仅仅是 `DefinePlugin` 提供的便利的一个场景。
- 
+
 
 **示例:**
 
@@ -64,6 +66,25 @@ if (true) {
 console.log('Production log')
 ```
 
+## Use Case: Feature Flags
+Enable/disable features in production/development build using [feature flags](https://en.wikipedia.org/wiki/Feature_toggle).
+
+```javascript
+new webpack.DefinePlugin({
+  'NICE_FEATURE': JSON.stringify(true),
+  'EXPERIMENTAL_FEATURE': JSON.stringify(false)
+})
+```
+
+## Use Case: Service URLs
+Use a different service URL in production/development builds:
+
+```javascript
+new webpack.DefinePlugin({
+  'SERVICE_URL': JSON.stringify("http://dev.example.com")
+})
+```
+
 ***
 
 > 原文：https://webpack.js.org/plugins/define-plugin/
diff --git a/content/plugins/index.md b/content/plugins/index.md
@@ -2,6 +2,7 @@
 title: Plugins
 contributors:
   - simon04
+  - gonzoyumo
 ---
 
 webpack has a rich plugin interface. Most of the features within webpack itself use this plugin interface. This makes webpack **flexible**.
@@ -14,6 +15,7 @@ webpack has a rich plugin interface. Most of the features within webpack itself
 |[`CompressionWebpackPlugin`](/plugins/compression-webpack-plugin)|Prepare compressed versions of assets to serve them with Content-Encoding|
 |[`I18nWebpackPlugin`](/plugins/i18n-webpack-plugin)|Adds i18n support to your bundles|
 |[`HtmlWebpackPlugin`](/plugins/html-webpack-plugin)| Simplifies creation of HTML files (`index.html`) to serve your bundles|
+|[`NormalModuleReplacementPlugin`](/plugins/normal-module-replacement-plugin)|Replaces resource that matches a regexp|
 
 
 ![Awesome](../assets/awesome-badge.svg)
diff --git a/content/plugins/normal-module-replacement-plugin.md b/content/plugins/normal-module-replacement-plugin.md
@@ -0,0 +1,87 @@
+---
+title: NormalModuleReplacementPlugin
+contributors:
+  - gonzoyumo
+---
+## Install
+
+The `NormalModuleReplacementPlugin` is a built-in webpack plugin.
+
+
+## Usage
+
+``` javascript
+new webpack.NormalModuleReplacementPlugin(resourceRegExp, newResource)
+```
+
+The `NormalModuleReplacementPlugin` allows you to replace resources that match `resourceRegExp` with `newResource`. If `newResource` is relative, it is resolved relative to the previous resource. If `newResource` is a function, it is expected to overwrite the request attribute of the supplied resource.
+
+This can be useful for allowing different behaviour between builds.
+
+## Basic example
+
+Replace a specific module when building for development environment ([read more](/configuration/environment)).
+
+
+Say you have a config file `some/path/config.development.module.js` and a special version for production in `some/path/config.production.module.js`
+
+Just add the following plugin when building for production:
+
+``` javascript
+new webpack.NormalModuleReplacementPlugin(
+  /some\/path\/config\.development\.js/,
+  './config.production.js'
+);
+```
+
+## Advanced example
+
+Conditional build depending on an environment var ([read more](/configuration/environment)).
+
+Say you want a configuration with specific values for different build targets.
+
+``` javascript
+module.exports = function(env) {
+  var appTarget = env.APP_TARGET || 'VERSION_A';
+  return {
+    plugins: [
+      new webpack.NormalModuleReplacementPlugin(/(.*)-APP_TARGET(\.*)/, function(resource) {
+        resource.request = resource.request.replace(/-APP_TARGET/, `-${appTarget}`);
+      })
+    ]
+  }
+  
+}
+```
+
+Create the two config files:
+
+**app/config-VERSION_A.js:**
+``` javascript
+export default {
+  title : 'I am version A'
+}
+```
+**app/config-VERSION_B.js:**
+``` javascript
+export default {
+  title : 'I am version B'
+}
+```
+Then import that config using the keyword you're looking for in the regexp:
+
+``` javascript
+import config from 'app/config-APP_TARGET';
+console.log(config.title);
+```
+
+And now you just get the right config imported depending on which target you're building for:
+
+``` shell
+webpack --env.APP_TARGET VERSION_A
+=> 'I am version A'
+
+webpack --env.APP_TARGET VERSION_B
+=> 'I am version B'
+
+```
diff --git a/content/pluginsapi/tapable.md b/content/pluginsapi/tapable.md
@@ -7,39 +7,39 @@ contributors:
   - e-cloud
 ---
 
-[Tapable](https://github.com/webpack/tapable) is small library that allows you to add and apply plugins to a javascript module. 
-It can be inherited or mixed in to other modules. It is similar to NodeJS's `EventEmitter` class, focusing on custom event emission and manipulation. 
-However, in addition to this, `Tapable` allows you to have access to the "emittee" or "producer" of the event through callbacks arguments.  
+[Tapable](https://github.com/webpack/tapable)是一个小型库,能够让我们为javascript模块添加并应用插件。
+它可以被其它模块继承或混合。它类似于NodeJS的 `EventEmitter` 类,专注于自定义事件的发射和操作。
+除此之外, `Tapable` 允许你通过回调函数的参数访问事件的生产者。
 
-`Tapable` has four groups of member functions:
+`Tapable` 有四组成员函数:
 
-* `plugin(name:string, handler:function)` - This allows a custom plugin to register into a **Tapable instance**'s event.
-This acts as the same as `on()` of `EventEmitter`, for registering a handler/listener to do something when the signal/event happens.
+* `plugin(name:string, handler:function)` - 这个方法允许给**Tapable实例**事件注册一个自定义插件。
+这个操作类似于 `EventEmitter` 的 `on()`, 注册一个处理函数/监听器到某个信号/事件发生时执行。
 
-* `apply(…pluginInstances: (AnyPlugin|function)[])` - `AnyPlugin` should be subclass of [AbstractPlugin](https://github.com/webpack/webpack/blob/master/lib/AbstractPlugin.js), or a class (or object, rare case) has an `apply` method, or just a function with some registration code inside.
-This method is just to **apply** plugins' definition, so that the real event listeners can be registered into the **Tapable instance**'s registry.
+* `apply(…pluginInstances: (AnyPlugin|function)[])` - `AnyPlugin` 是[AbstractPlugin](https://github.com/webpack/webpack/blob/master/lib/AbstractPlugin.js)的子类, 或者是一个有 `apply` 方法的类(少数情况下是个对象),或者只是一个有注册代码的函数。
+这个方法只是 **apply** 插件的定义,所以正真的事件监听器会被注册到**Tapable实例**的注册表。
 
-* `applyPlugins*(name:string, …)` - The **Tapable instance** can apply all the plugins under a particular hash using these functions.
-These group of method act like `emit()` of `EventEmitter`, to control the event emission meticulously with various strategy for various use cases.
+* `applyPlugins*(name:string, …)` - **Tapable instance** ????
+这些方法执行类似于 `EventEmitter` 的 `emit()`, 可以针对不同的使用情况采用不同的策略控制事件发射。
 
-* `mixin(pt: Object)` - a simple method to extend `Tapable`'s prototype as a mixin rather than inheritance.
+* `mixin(pt: Object)` - 一个简单的方法能够以混合的方式扩展 `Tapable` 的原型,而非继承。
 
-The different `applyPlugins*` methods cover the following use cases:
+不同的 `applyPlugins*` 方法对应以下使用情况:
 
-* Plugins can run serially
+* 串行执行插件
 
-* Plugins can run in parallel
+* 并行执行插件
 
-* Plugins can run one after the other but taking input from the previous plugin (waterfall)
+* 插件一个接一个的执行,并且每个插件接收上一个插件的返回值(瀑布)
 
-* Plugins can run asynchronously
+* 异步执行插件
 
-* Quit runing plugins on bail: that is once one plugin returns non-`undefined`, jump out of the run flow and return *the return of that plugin*. This sounds like `once()` of `EventEmitter` but is totally different.
+* 保护模式终止插件执行: 一旦某个插件返回 non-`undefined` ,会退出运行流程并返回 *这个插件的返回值*。这看起来像 `EventEmitter` 的 `once()`,但他们是完全不同的。
 
-## Example
-One of webpack's **Tapable instances**, [Compiler](./compiler), is responsible for compiling the webpack configuration object and returning a [Compilation](./compilation) instance. When the Compilation instance runs, it creates the required bundles.
+## 示例
+webpack中有个Tapable实例 [Compiler](./compiler), 它的作用是编译webpack的配置对象,并返回[Compilation](./compilation)实例。当Compilation实例运行时,它会创建所需的包。
 
-See below is a simplified version of how this looks using `Tapable`.
+下面是一个使用 `Tapable` 的小例子。
 
 **node_modules/webpack/lib/Compiler.js**
 
@@ -51,7 +51,7 @@ function Compiler() {
 Compiler.prototype = Object.create(Tapable.prototype);
 ```
 
-Now to write a plugin on the compiler,
+接着写一个编译器的插件
 
 **my-custom-plugin.js**
 
@@ -62,7 +62,7 @@ CustomPlugin.prototype.apply = function(compiler) {
 }
 ```
 
-The compiler executes the plugin at the appropriate point in its lifecycle by
+这个编译器会依下面的代码在合适的生命周期点执行插件
 
 **node_modules/webpack/lib/Compiler.js**
 
@@ -72,4 +72,4 @@ this.apply*("emit",options) // will fetch all plugins under 'emit' name and run
 
 ***
 
-> 原文：https://webpack.js.org/pluginsapi/tapable/
+> 原文：https://webpack.js.org/pluginsapi/tapable/
