update master & update loaders & update plugins (#418)

* update /content/loaders & /content/plugins

* update /content/loaders & /content/plugins

* update /content/loaders & /content/plugins

* update contributors

* update /content/loaders & /content/plugins

* fix LinkDropdown

* 修复 npm 命令错误导致编译不成功的问题

* update /content/loaders & /content/plugins

* update /content/loaders & /content/plugins

* update /content/loaders & /content/plugins

* docs(plugins): fix typo in module-concatenation-plugin.md (#1683)

* docs(concepts): simplify the introduction (#1673)

Make the `index` page more beginner friendly with less technical
lingo and complex details.

Resolves #1416

* docs(plugins): add “scope hoisting” intro in module-concatenation-plugin (#1684)

This adds a link between “concatenation behavior” and “scope hoisting”. Without this, 
a new person might be confused what exactly “scope hoisting” is (because it appears 
without any visible connection to the previous content).

* docs(api): fix some method signatures in loaders.md (#1685)

In actual fact the parameters passed to `emitWarning` / `emitError` must 
be an instance of Error.

* update /content/loaders & /content/plugins

* docs(guides): consistent quoute use in typescript.md (#1687)

* docs(api/guides): document new --concatenate-modules flag (#1686)

Document the new `--concatenate-modules` flag in both the CLI documentation
and production guide. Add section on the `ModuleConcatenationPlugin` in the 
production guide (as we include this plugin under `-p`, it also makes sense to 
mention it in this guide.

* docs(guides): fix issues with examples in shimming.md (#1680)

Rename plugin identifier and require webpack when it is used in the
configuration examples.

* docs(guides): add middleware tip to the hmr guide

Resolves #1682

* Revert "A new --concatenate-modules flag" (#1692)

* update master

* update /content/loaders & /content/plugins

* docs(concepts): fix grammar in output.md (#1694)

* docs(contribute): update writing-a-loader (#1691)

Use normal function instead of arrow function to fix scope in loader
example.

* docs(plugins): add external example in SourceMapDevToolPlugin (#1676)

Demonstrate how one might use the plugin to host source maps externally.

* docs(config): update dev-server open option (#1693)

State the ability to open in specific browser.

* fix bugs

* update /content/loaders & /content/plugins

* docs(api): improve formatting and grammar in loaders.md

* docs(api): clarify fourth parameter of `this.callback` in loaders.md

Add some lead in descriptions to the `Examples` section and clarify that meta
data can be passed along via the fourth parameter to `this.callback` and accepted
as the third parameter to a loader function.

Resolves #1607

* docs(api): populate missing link in loaders.md

* docs(plugins): correct example in html-webpack-plugin (#1698)

* docs(guides): update an example in production.md (#1696)

Switch to shortened form when using the `DefinePlugin` to define the 
`process.env.NODE_ENV` value. This avoids a bug which is mentioned
in the plugin's documentation:

https://webpack.js.org/plugins/define-plugin/#feature-flags

* fix(markdown): fix overflowing inline code (#1701)

Change the css to fix the text inside code tag which was overflowing 
the parent div.

* docs(concepts): update concepts wording (#1702)

Add "static" to "module bundler". Some feedback here was given to me 
on twitter to make sure we are clear with what these terms mean.

* update /content/loaders & /content/plugins

* docs(config): fix dead link to webpack-dev-server example (#1704)

* docs(concepts): use fragment links in usage instructions (#1705)

This is just a quality of life adjustment that updates the list of ways to 
use loaders with fragment links to the relevant section in the docs.  In 
their current state, the section feels like a dead end, abruptly cutting off 
with three bullet points and no examples. While one can read on and 
figure it out, there is a break in focus that is quite distracting.

* docs(guides): add windows usage tip in getting-started (#1671)

* doc(guides): fix grammatical error in build-performance (#1709)

Change "less" to "fewer".

* docs(guides): correct two small typos

* docs(api): remove inadvertent double verb (#1714)

* docs(contribute): fix grammar in writing-a-plugin (#1715)

* docs(config): add semicolon for consistency (#1716)

The final code block was missing a semicolon from the end of the 
first line; added it in to match the other require statements.

* docs(contributing): add note about debian OS (#1721)

Related issue: #1718

* docs(guides): add output example to shimming doc (#1720)

* docs(plugins): use `.includes` over `.indexOf` (#1719)

Really minor but I think `.includes` is more readable to the unfamiliar 
with javascript.

* docs(guides): use `npx` in getting-started (#1708)

Keep the mention the webpack binary's path but use the `npx` utility
now that it ships with Node. Fix some punctuation and grammar. Clarify 
why npm scripts are still useful even over `npx`.

* update /src/content/loaders & /src/content/plugins

Author: hello-lizhihua

.github/CONTRIBUTING.md

@@ -30,6 +30,8 @@ See the `package.json` for the full list of `scripts`.
 
 > Note that a __Python version between v2.5.0 and 3.0.0__ is required for the [proselint][12] dependency.
 
+> On Debian and Ubuntu operating systems you may have to use `node >= 7.0.0` to avoid build errors with `node-sass`. Please note that we don't officially support building on these systems.
+
 
 ## Contributor License Agreement
 

src/content/api/loaders.md

@@ -15,49 +15,56 @@ contributors:
 
 ## 示例
 
+The following sections provide some basic examples of the different types of loaders. Note that the `map` and `meta` parameters are optional, see [`this.callback`](/api/loaders#this-callback) below.
+
 ### 同步 loader
 
-**sync-loader.js**
+Either `return` or `this.callback` can be used to return the transformed `content` synchronously:
 
-```javascript
-module.exports = function(content) {
+__sync-loader.js__
+
+``` js
+module.exports = function(content, map, meta) {
   return someSyncOperation(content);
 };
 ```
 
-**sync-loader-with-multiple-results.js**
+The `this.callback` method is more flexible as it allows multiple arguments to be passed as opposed to just the `content`.
 
-```javascript
-module.exports = function(content) {
-  this.callback(null, someSyncOperation(content), sourceMaps, ast);
-  return; // 当调用callback()时总是返回undefined
+__sync-loader-with-multiple-results.js__
+
+``` js
+module.exports = function(content, map, meta) {
+  this.callback(null, someSyncOperation(content), sourceMaps, meta);
+  return; // 当调用callback()时总是返回 undefined
 };
 ```
 
-
 ### 异步 loader
 
-**async-loader.js**
+For asynchronous loaders, [`this.async`](/api/loaders#this-async) is used to retrieve the `callback` function:
 
-```javascript
-module.exports = function(content) {
-    var callback = this.async();
-    someAsyncOperation(content, function(err, result) {
-        if(err) return callback(err);
-        callback(null, result);
-    });
+__async-loader.js__
+
+``` js
+module.exports = function(content, map, meta) {
+  var callback = this.async();
+  someAsyncOperation(content, function(err, result) {
+    if (err) return callback(err);
+    callback(null, result, map, meta);
+  });
 };
 ```
 
-**async-loader-with-multiple-results.js**
+__async-loader-with-multiple-results.js__
 
-```javascript
-module.exports = function(content) {
-    var callback = this.async();
-    someAsyncOperation(content, function(err, result, sourceMaps, ast) {
-        if(err) return callback(err);
-        callback(null, result, sourceMaps, ast);
-    });
+``` js
+module.exports = function(content, map, meta) {
+  var callback = this.async();
+  someAsyncOperation(content, function(err, result, sourceMaps, meta) {
+    if (err) return callback(err);
+    callback(null, result, sourceMaps, meta);
+  });
 };
 ```
 
@@ -68,9 +75,9 @@ T> loader 最初被设计为可以在同步 loader pipeline（如 Node.js ，使
 
 默认情况下，资源文件会被转化为 UTF-8 字符串，然后传给 loader。通过设置 `raw`，loader 可以接收原始的 `Buffer`。每一个 loader 都可以用 `String` 或者 `Buffer` 的形式传递它的处理结果。Complier 将会把它们在 loader 之间相互转换。
 
-**raw-loader.js**
+__raw-loader.js__
 
-```javascript
+``` js
 module.exports = function(content) {
 	assert(content instanceof Buffer);
 	return someSyncOperation(content);
@@ -87,10 +94,11 @@ loader **总是**从右到左地被调用，但是在一些情况下，loader 
 
 如果中间某个 loader 的 `pitch` 方法返回了一个值，那么剩下的 loader 都会被跳过，转而从当前 loader 开始向左调用 loader。`data`可以在 pitch 和普通的 loader 调用间传递。
 
-```javascript
+``` js
 module.exports = function(content) {
 	return someSyncOperation(content, this.data.value);
 };
+
 module.exports.pitch = function(remainingRequest, precedingRequest, data) {
 	if(someCondition()) {
 		// 直接返回
@@ -101,13 +109,13 @@ module.exports.pitch = function(remainingRequest, precedingRequest, data) {
 ```
 
 
-## The loader context
+## loader 上下文
 
 loader context 表示在 loader 内使用 `this` 可以访问的一些方法或属性
 
 假设我们在 `/abc/file.js` 中这样请求加载别的模块：
 
-```javascript
+``` js
 require("./loader1?xyz!loader2!./resource?rrr");
 ```
 
@@ -136,26 +144,28 @@ require("./loader1?xyz!loader2!./resource?rrr");
 1. 如果这个 loader 配置了 [`options`](/configuration/module/#useentry) 对象的话，`this.query` 就指向这个 option 对象。
 2. 如果 loader 中没有 `options`，而是以 query 字符串作为参数调用时，`this.query` 就是一个以 `?` 开头的字符串。
 
-W> `options` 已取代 `query`，所以此属性废弃。使用`loader-utils`中的 [`getOptions` 方法](https://github.com/webpack/loader-utils#getoptions)来提取给定 loader 的 option。
+W> `options` 已取代 `query`，所以此属性废弃。使用 `loader-utils` 中的 [`getOptions` 方法](https://github.com/webpack/loader-utils#getoptions)来提取给定 loader 的 option。
 
 
 ### `this.callback`
 
 一个可以同步或者异步调用的可以返回多个结果的函数。预期的参数是：
 
-```typescript
+``` js
 this.callback(
-    err: Error | null,
-    content: string | Buffer,
-    sourceMap?: SourceMap,
-    abstractSyntaxTree?: AST
+  err: Error | null,
+  content: string | Buffer,
+  sourceMap?: SourceMap,
+  meta?: any
 );
 ```
 
 1. 第一个参数必须是 `Error` 或者 `null`
 2. 第二个参数是一个 `string` 或者 [`Buffer`](https://nodejs.org/api/buffer.html)。
 3. 可选的：第三个参数必须是一个可以被[这个模块](https://github.com/mozilla/source-map)解析的 source map。
-4. 可选的：`AST` 可以是给定语言的抽象语法树，比如 [`ESTree`](https://github.com/estree/estree)。这个值会被 webpack 自身忽略掉，但是如果你想在多个 loader 之间共用 AST 的时候对于加速构建非常有用。
+4. 可选的：The fourth option, ignored by webpack, can be anything (e.g. some meta data).
+
+T> It can be useful to pass an abstract syntax tree (AST), like [`ESTree`](https://github.com/estree/estree), as the fourth argument (`meta`) to speed up the build time if you want to share common ASTs between loaders.
 
 如果这个函数被调用的话，你应该返回 undefined 从而避免含糊的 loader 结果。
 
@@ -174,7 +184,7 @@ this.callback(
 
 设置是否可缓存标志的函数：
 
-```typescript
+``` typescript
 cacheable(flag = true: boolean)
 ```
 
@@ -187,13 +197,13 @@ cacheable(flag = true: boolean)
 
 所有 loader 组成的数组。它在 pitch 阶段的时候是可以写入的。
 
-```typescript
+``` js
 loaders = [{request: string, path: string, query: string, module: function}]
 ```
 
 在我们的示例中：
 
-```javascript
+``` js
 [
   {
     request: "/abc/loader1.js?xyz",
@@ -260,7 +270,7 @@ T> loader 最初被设计为可以同时当 Babel transform 用。如果你编
 
 ### `this.emitWarning`
 
-```typescript
+``` typescript
 emitWarning(warning: Error)
 ```
 
@@ -269,7 +279,7 @@ emitWarning(warning: Error)
 
 ### `this.emitError`
 
-```typescript
+``` typescript
 emitError(error: Error)
 ```
 
@@ -278,7 +288,7 @@ emitError(error: Error)
 
 ### `this.loadModule`
 
-```typescript
+``` typescript
 loadModule(request: string, callback: function(err, source, sourceMap, module))
 ```
 
@@ -287,7 +297,7 @@ loadModule(request: string, callback: function(err, source, sourceMap, module))
 
 ### `this.resolve`
 
-```typescript
+``` typescript
 resolve(context: string, request: string, callback: function(err, result: string))
 ```
 
@@ -296,7 +306,7 @@ resolve(context: string, request: string, callback: function(err, result: string
 
 ### `this.addDependency`
 
-```typescript
+``` typescript
 addDependency(file: string)
 dependency(file: string) // 简写
 ```
@@ -306,7 +316,7 @@ dependency(file: string) // 简写
 
 ### `this.addContextDependency`
 
-```typescript
+``` typescript
 addContextDependency(directory: string)
 ```
 
@@ -315,7 +325,7 @@ addContextDependency(directory: string)
 
 ### `this.clearDependencies`
 
-```typescript
+``` typescript
 clearDependencies()
 ```
 
@@ -324,7 +334,7 @@ clearDependencies()
 
 ### `this.emitFile`
 
-```typescript
+``` typescript
 emitFile(name: string, content: Buffer|string, sourceMap: {...})
 ```
 
@@ -343,7 +353,7 @@ W> 强烈建议不要使用这些属性，因为我们打算移除它们。它
 
 ### `this.exec`
 
-```typescript
+``` typescript
 exec(code: string, filename: string)
 ```
 
@@ -352,7 +362,7 @@ exec(code: string, filename: string)
 
 ### `this.resolveSync`
 
-```typescript
+``` typescript
 resolveSync(context: string, request: string) -> string
 ```
 

src/content/concepts/index.md

@@ -10,7 +10,7 @@ contributors:
   - TheDutchCoder
 ---
 
-本质上，*webpack* 是一个现代 JavaScript 应用程序的_模块打包器(module bundler)_。当 webpack 处理应用程序时，它会递归地构建一个_依赖关系图(dependency graph)_，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 _bundle_。
+本质上，*webpack* 是一个现代 JavaScript 应用程序的_静态模块打包器(module bundler)_。当 webpack 处理应用程序时，它会递归地构建一个_依赖关系图(dependency graph)_，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 _bundle_。
 
 它是[高度可配置的](/configuration)，但是，在开始前你需要先理解四个**核心概念**：
 

src/content/concepts/loaders.md

@@ -43,9 +43,9 @@ module.exports = {
 
 在你的应用程序中，有三种使用 loader 的方式：
 
-* 配置（推荐）：在 __webpack.config.js__ 文件中指定 loader。
-* 内联：在每个 `import` 语句中显式指定 loader。
-* CLI：在 shell 命令中指定它们。
+* [配置](#configuration)（推荐）：在 __webpack.config.js__ 文件中指定 loader。
+* [内联](#inline)：在每个 `import` 语句中显式指定 loader。
+* [CLI](#cli)：在 shell 命令中指定它们。
 
 
 ### 配置[Configuration]

src/content/concepts/output.md

@@ -9,6 +9,7 @@ contributors:
 
 配置 `output` 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个`入口`起点，但只指定一个`输出`配置。
 
+
 ## 用法(Usage)
 
 在 webpack 中配置 `output` 属性的最低要求是，将它的值设置为一个对象，包括以下两点：
@@ -36,7 +37,6 @@ module.exports = config;
 
 如果配置创建了多个单独的 "chunk"（例如，使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用[占位符(substitutions)](/configuration/output#output-filename)来确保每个文件具有唯一的名称。
 
-
 ``` javascript
 {
   entry: {

src/content/configuration/dev-server.md

@@ -40,7 +40,7 @@ Content not from webpack is served from /path/to/dist/
 
 这将给出一些背景知识，就能知道服务器的访问位置，并且知道服务已启动。
 
-如果你通过 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)。
+如果你通过 Node.js API 来使用 dev-server， `devServer` 中的选项将被忽略。将选项作为第二个参数传入： `new WebpackDevServer(compiler, {...})`。关于如何通过 Node.js API 使用 webpack-dev-server 的示例，请[查看此处](https://github.com/webpack/webpack-dev-server/tree/master/examples/api/simple)。
 
 W> Be aware that when [exporting multiple configurations](/configuration/configuration-types/#exporting-multiple-configurations) only the `devServer` options for the first configuration will be taken into account and used for all the configurations in the array.
 
@@ -465,6 +465,12 @@ Usage via the CLI
 webpack-dev-server --open
 ```
 
+If no browser is provided (as shown above), your default browser will be used. To specify a different browser, just pass its name:
+
+```bash
+webpack-dev-server --open 'Google Chrome'
+```
+
 
 ## `devServer.openPage`
 

src/content/configuration/plugins.md

@@ -29,7 +29,7 @@ plugins: [
 一个复杂示例，使用多个插件，可能看起来就像这样：
 
 ```js
-var webpack = require('webpack')
+var webpack = require('webpack');
 // 导入非 webpack 默认自带插件
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var DashboardPlugin = require('webpack-dashboard/plugin');

src/content/contribute/writing-a-loader.md

@@ -234,7 +234,7 @@ __src/loader.js__
 ``` js
 import { getOptions } from 'loader-utils';
 
-export default source => {
+export default function loader(source) {
   const options = getOptions(this);
 
   source = source.replace(/\[name\]/g, options.name);

src/content/contribute/writing-a-plugin.md

@@ -178,7 +178,7 @@ This is the simplest format for a plugin. Many useful events like `"compile"`, `
 
 `applyPluginsWaterfall(name: string, init: any, args: any...)`
 
-Here each of the plugins are called one after the other with the args from the return value of the previous plugin. The plugin must take into consider the order of its execution.
+Here each of the plugins are called one after the other with the args from the return value of the previous plugin. The plugin must take the order of its execution into account.
 It must accept arguments from the previous plugin that was executed. The value for the first plugin is `init`. This pattern is used in the Tapable instances which are related to the `webpack` templates like `ModuleTemplate`, `ChunkTemplate` etc.
 
 - __asynchronous__ When all the plugins are applied asynchronously using