[zh-cn] synced recent updates from en

docs/zh-cn/README.md

@@ -8,7 +8,7 @@
 
 这里有一些 `vue-loader` 提供的很酷的特性：
 
-- ES2015 默认支持;
+- ES2015 默认支持；
 - 允许对 Vue 组件的组成部分使用其它 Webpack loaders，比如对 `<style>` 使用 SASS 和对 `<template>` 使用 Jade；
 - `.vue` 文件中允许自定义节点，然后使用自定义的 loader 处理他们；
 - 把 `<style>` 和 `<template>` 中的静态资源当作模块来对待，并使用 Webpack loaders 进行处理；
@@ -19,11 +19,11 @@
 
 ### Webpack 是什么?
 
-如果你已经熟悉了 Webpack，随时可以跳过下面的说明。如果你没有使用过 Webpack,下面是一个快速介绍：
+如果你已经熟悉了 Webpack，随时可以跳过下面的说明。如果你没有使用过 Webpack，下面是一个快速介绍：
 
-[Webpack](http://webpack.github.io/) 是一个模块打包工具。它将一堆文件中的每个文件都作为一个模块，找出他们的依赖关系，将它们打包为可部署的静态资源。
+[Webpack](https://webpack.github.io/) 是一个模块打包工具。它将一堆文件中的每个文件都作为一个模块，找出他们的依赖关系，将它们打包为可部署的静态资源。
 
-![webpack](http://webpack.github.io/assets/what-is-webpack.png)
+![webpack](https://webpack.github.io/assets/what-is-webpack.png)
 
 一个基本的例子，想像我们有一些 CommonJS 模块，它不能直接在浏览器中运行，所以我们需要打包成一个文件，这样就可以通过`<script>` 标签加载。Webpack 可以遵循 `require()` 调用的依赖关系，为我们完成这些工作。
 

docs/zh-cn/SUMMARY.md

@@ -19,3 +19,14 @@
   - [测试](workflow/testing.md)
   - [使用 Mock 测试](workflow/testing-with-mocks.md)
 - [选项参考](options.md)
+  - [loaders](options.md#loaders)
+  - [preLoaders](options.md#preloaders)
+  - [postLoaders](options.md#postloaders)
+  - [postcss](options.md#postcss)
+  - [cssSourceMap](options.md#csssourcemap)
+  - [esModule](options.md#esmodule)
+  - [preserveWhitespace](options.md#preservewhitespace)
+  - [transformToRequire](options.md#transformtorequire)
+  - [buble](options.md#buble)
+  - [extractCSS](options.md#extractcss)
+  - [optimizeSSR](options.md#optimizessr)

docs/zh-cn/configurations/advanced.md

@@ -10,34 +10,33 @@
 
 为此，请指定 `vue-loader` 的 `loaders` 选项：
 
-> 注意 `preLoaders` 和 `postLoaders` 只在版本 >=10.3.0 支持
+> 注意 `preLoaders` 和 `postLoaders` 只在 10.3.0+ 版本支持
 
 ### Webpack 2.x
 
 ``` js
 module.exports = {
   // other options...
   module: {
-    // module.rules 与 1.x中的 module.loaders 相同
+    // module.rules 与 1.x 中的 module.loaders 相同
     rules: [
       {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
-          // `loaders` 覆盖默认 loaders.
-          // 以下配置会导致所有的 <script> 标签 "lang" 属性失效。
-          // attribute to be loaded with coffee-loader
+          // `loaders` 覆盖默认 loaders。
+          // 以下配置会导致所有无 "lang" 特性的 <script> 标签加载 coffee-loader
           loaders: {
             js: 'coffee-loader'
           },
 
-          // `preLoaders` 会在默认 loaders 之前加载.
-          // 你可以用来预处理语言块 - 一个例子是用来处理构建时的 i18n
+          // `preLoaders` 会在默认 loaders 之前加载。
+          // 你可以用来预处理语言块——一个例子是用来处理构建时的 i18n
           preLoaders: {
             js: '/path/to/custom/loader'
           },
 
-          // `postLoaders` 会在默认 loaders 之后加载.
+          // `postLoaders` 会在默认 loaders 之后加载。
           //
           // - 对于 `html`, 默认 loader 返回会编译为 JavaScript 渲染函数
           //
@@ -78,4 +77,4 @@ module.exports = {
 }
 ```
 
-进阶配置更实际的用法是 [提取组件中的 CSS 到单个文件](./extract-css.md)。
+进阶配置更实际的用法是[提取组件中的 CSS 到单个文件](./extract-css.md)。

docs/zh-cn/configurations/asset-url.md

@@ -1,8 +1,8 @@
 # 资源路径处理
 
-默认情况下，`vue-loader` 使用 [css-loader](https://github.com/webpack/css-loader) 和 Vue 模版编译器自动处理你的样式和模版文件。在编译过程中，所有的资源路径例如 `<img src="...">`, `background: url(...)` 和 `@import` **会作为模块依赖**。
+默认情况下，`vue-loader` 使用 [css-loader](https://github.com/webpack/css-loader) 和 Vue 模版编译器自动处理你的样式和模版文件。在编译过程中，所有的资源路径例如 `<img src="...">`、`background: url(...)` 和 `@import` **会作为模块依赖**。
 
-例如，`url(./image.png)` 会被转换为 `require('./image.png')`,
+例如，`url(./image.png)` 会被转换为 `require('./image.png')`，而
 
 ``` html
 <img src="../image.png">
@@ -20,4 +20,4 @@ createElement('img', { attrs: { src: require('../image.png') }})
 
 1. `file-loader` 可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。此外，这意味着 **你可以就近管理你的图片文件，可以使用相对路径而不用担心布署时URL问题**。使用正确的配置，Webpack 将会在打包输出中自动重写文件路径为正确的URL。
 
-2. `url-loader` 允许你有条件将文件转换为内联的 base-64 URL（当文件小于给定的阈值），这会减少小文件的 HTTP 请求。如果文件大于该阈值，会自动的交给 `file-loader` 处理。
+2. `url-loader` 允许你有条件将文件转换为内联的 base-64 URL (当文件小于给定的阈值)，这会减少小文件的 HTTP 请求。如果文件大于该阈值，会自动的交给 `file-loader` 处理。

docs/zh-cn/configurations/custom-blocks.md

@@ -4,10 +4,10 @@
 
 在 `.vue` 文件中，你可以自定义语言块。自定义块的内容将由 `vue-loader` 的 options 中的 `loader` 对象中指定的 loader 处理，然后被组件模块依赖。类似 [Loader 进阶配置](../configurations/advanced.md)中的配置，但使用的是标签名匹配，而不是 `lang` 属性。
 
-如果找到一个自定义块的 matching loader，该自定义块将被处理; 否则自定义块将被忽略。
+如果找到一个自定义块的 matching loader，该自定义块将被处理；否则自定义块将被忽略。
 另外，如果找到的 loader 返回一个函数，该函数将以 `* .vue` 文件的组件作为参数来调用。
 
-## 例子
+## 单个文档文件的例子
 
 这是提取自定义块 `<docs>` 的内容到单个 docs 文件中的例子：
 
@@ -66,3 +66,69 @@ module.exports = {
   ]
 }
 ```
+
+## 运行时可用的文档
+
+这里有一个向组件注入 `<docs>` 自定义块使其在运行时可用的例子。
+
+#### docs-loader.js
+
+为了使得自定义块内容被注入，我们需要一个自定义的 loader：
+
+``` js
+module.exports = function (source, map) {
+  this.callback(null, 'module.exports = function(Component) {Component.options.__docs = ' +
+    JSON.stringify(source) +
+    '}', map)
+}
+```
+
+#### webpack.config.js
+
+现在我们将为 `<docs>` 自定义块配置我们的 webpack 自定义 loader。
+
+``` js
+const docsLoader = require.resolve('./custom-loaders/docs-loader.js')
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue',
+        options: {
+          loaders: {
+            'docs': docsLoader
+          }
+        }
+      }
+    ]
+  }
+}
+```
+
+#### component.vue
+
+现在我们可以在运行时访问已导入组件的 `<docs>` 块内容了。
+
+``` html
+<template>
+  <div>
+    <component-b />
+    <p>{{ docs }}</p>
+  </div>
+</template>
+
+<script>
+import componentB from 'componentB';
+
+export default = {
+  data () {
+    return {
+      docs: componentB.__docs
+    }
+  },
+  components: {componentB}
+}
+</script>
+```

docs/zh-cn/configurations/pre-processors.md

@@ -1,6 +1,6 @@
 # 使用预处理器
 
-在 Webpack 中，所有的预处理器需要匹配对应的 loader。 `vue-loader` 允许你使用其它 Webpack loaders 处理 Vue 组件的某一部分。它会根据 `lang` 属性自动推断出要使用的 loaders。
+在 Webpack 中，所有的预处理器需要匹配对应的 loader。`vue-loader` 允许你使用其它 Webpack loaders 处理 Vue 组件的某一部分。它会根据 `lang` 属性自动推断出要使用的 loaders。
 
 ### CSS
 
@@ -35,7 +35,7 @@ npm install sass-loader node-sass --save-dev
 }
 ```
 
-如要获得更多关于 `vue-loader` 的配置信息，请查看 [Loader 进阶配置](./advanced.md) 章节。
+如要获得更多关于 `vue-loader` 的配置信息，请查看 [Loader 进阶配置](./advanced.md)章节。
 
 ### 加载一个全局设置文件
 
@@ -87,7 +87,7 @@ npm install coffee-loader --save-dev
 
 ### 模版
 
-模版的处理方式略有不同，因为大多数 Webpack 模版处理器（比如 `pug-loader`）会返回模版处理函数，而不是编译的 HTML 字符串，我们使用原始的 `pug` 替代 `pug-loader`:
+模版的处理方式略有不同，因为大多数 Webpack 模版处理器 (比如 `pug-loader`) 会返回模版处理函数，而不是编译的 HTML 字符串，我们使用原始的 `pug` 替代 `pug-loader`：
 
 ``` bash
 npm install pug --save-dev
@@ -100,16 +100,16 @@ div
 </template>
 ```
 
-> **重要:** 如果你使用 `vue-loader@<8.2.0`， 你还需要安装 `template-html-loader`。
+> **重要:** 如果你使用 `vue-loader@<8.2.0`，你还需要安装 `template-html-loader`。
 
 ### 行内 Loader Requests
 
-你可以在 `lang` 属性中使用 [Webpack loader requests](https://webpack.github.io/docs/loaders.html#introduction) ：
+你可以在 `lang` 属性中使用 [Webpack loader requests](https://webpack.github.io/docs/loaders.html#introduction)：
 
 ``` html
 <style lang="sass?outputStyle=expanded">
   /* use sass here with expanded output */
 </style>
 ```
 
-但是，这使你的 Vue 组件只适用于 Webpack，不能与 Browserify and [vueify](https://github.com/vuejs/vueify) 一同使用。**如果你打算将你的 Vue 组件作为可重复使用的第三方组件，请避免使用这个语法。**
+但是，这使你的 Vue 组件只适用于 Webpack，不能与 Browserify 和 [vueify](https://github.com/vuejs/vueify) 一同使用。**如果你打算将你的 Vue 组件作为可重复使用的第三方组件，请避免使用这个语法。**

docs/zh-cn/features/css-modules.md

@@ -2,7 +2,7 @@
 
 > 需要 ^9.8.0
 
-[CSS 模块](https://github.com/css-modules/css-modules) 是一个用于模块化和组合 CSS的流行系统。`vue-loader` 提供了与 CSS 模块的一流集成，可以作为模拟 CSS 作用域的替代方案。
+[CSS 模块](https://github.com/css-modules/css-modules)是一个用于模块化和组合 CSS的流行系统。`vue-loader` 提供了与 CSS 模块的一流集成，可以作为模拟 CSS 作用域的替代方案。
 
 ### 使用
 
@@ -58,7 +58,7 @@ export default {
 </script>
 ```
 
-请参考 [CSS Modules spec](https://github.com/css-modules/css-modules) 了解更多详细信息 [global exceptions](https://github.com/css-modules/css-modules#exceptions) 和 [composition](https://github.com/css-modules/css-modules#composition).
+请参考 [CSS Modules spec](https://github.com/css-modules/css-modules) 了解更多诸如 [global exceptions](https://github.com/css-modules/css-modules#exceptions) 和 [composition](https://github.com/css-modules/css-modules#composition) 等详细信息。
 
 ### 自定义注入名称
 

docs/zh-cn/features/es2015.md

@@ -22,11 +22,11 @@ export default {
 </script>
 ```
 
-我们使用 ES2015 的属性的简洁表示法去定义子组件，`{ ComponentA }` 是 `{ ComponentA: ComponentA }` 的简写，Vue 会自动的将 key 转换为`component-a`，所以你可以在 template 中使用 `<component-a>`.
+我们使用 ES2015 的属性的简洁表示法去定义子组件，`{ ComponentA }` 是 `{ ComponentA: ComponentA }` 的简写，Vue 会自动的将 key 转换为`component-a`，所以你可以在 template 中使用 `<component-a>`。
 
 ### 在 Templates 中使用 ES2015
 
-`.vue` 中的 `<template>` 会编译为 JavaScript 渲染函数，然后通过自定义构建的 [Buble](https://buble.surge.sh/guide/) 去支持 ES2015，这允许你使用[属性的简洁表示法](https://buble.surge.sh/guide/#object-shorthand-methods-and-properties-transforms-concisemethodproperty-) 和 [属性名表达式](https://buble.surge.sh/guide/#computed-properties-transforms-computedproperty-)：
+`.vue` 中的 `<template>` 会编译为 JavaScript 渲染函数，然后通过自定义构建的 [Buble](https://buble.surge.sh/guide/) 去支持 ES2015，这允许你使用[属性的简洁表示法](https://buble.surge.sh/guide/#object-shorthand-methods-and-properties-transforms-concisemethodproperty-)和[属性名表达式](https://buble.surge.sh/guide/#computed-properties-transforms-computedproperty-)：
 
 ``` html
 <div :class="[{ active: active }, isButton ? prefix + '-button' : null]">
@@ -54,7 +54,7 @@ export default {
 </my-component>
 ```
 
-你还可以使用 [`buble` 选项](../options.md#buble) 自定义模板中支持的功能。
+你还可以使用 [`buble` 选项](../options.md#buble)自定义模板中支持的功能。
 
 ### 转换普通 `.js` 文件
 

docs/zh-cn/features/postcss.md

@@ -29,7 +29,7 @@ module.exports = {
 }
 ```
 
-Webpack 2.x 例子:
+Webpack 2.x 例子：
 
 ``` js
 // webpack.config.js
@@ -56,7 +56,7 @@ module.exports = {
 
 - 返回插件数组的函数；
 
-- 要传递给 PostCSS 处理器的包含 options 的对象。当你使用的 PostCSS 项目依赖自定义 `parser/stringifiers`时，这很有用：
+- 要传递给 PostCSS 处理器的包含 options 的对象。当你使用的 PostCSS 项目依赖自定义 parser/stringifiers 时，这很有用：
 
   ``` js
   postcss: {

docs/zh-cn/features/scoped-css.md

@@ -1,6 +1,6 @@
 # CSS 作用域
 
-当 `<style>` 标签有 `scoped` 属性时，它的 CSS 只作用于当前组件中的元素。 这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不需要任何 polyfills。 它通过使用 PostCSS 来实现以下转换：
+当 `<style>` 标签有 `scoped` 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不需要任何 polyfills。它通过使用 PostCSS 来实现以下转换：
 
 ``` html
 <style scoped>
@@ -46,6 +46,22 @@
 
 3. Partials 不受作用域样式影响。
 
-4. **CSS 作用域不能代替 classes**。考虑到浏览器渲染各种 CSS 选择器的方式，当使用 scoped 时，`p { color: red }` 在作用域中会慢很多倍（即当与属性选择器组合时）。如果你使用 classes 或者 ids 代替，比如 `.example { color: red }`，这样几乎没有性能影响。[Here's a playground](http://stevesouders.com/efws/css-selectors/csscreate.php) 你可以测试它们的不同。
+4. **CSS 作用域不能代替 classes**。考虑到浏览器渲染各种 CSS 选择器的方式，当使用 scoped 时，`p { color: red }` 在作用域中会慢很多倍 (即当与属性选择器组合时)。如果你使用 classes 或者 ids 代替，比如 `.example { color: red }`，这样几乎没有性能影响。你可以在[这块试验田](https://stevesouders.com/efws/css-selectors/csscreate.php)测试它们的不同。
 
 5. **在递归组件中小心使用后代选择器!** 对于带有选择器 `.a .b` 的CSS 规则，如果元素 `.a` 包含递归子组件，所有的子组件中的 `.b` 会被匹配。
+
+6. 如果 `scoped` 样式中需要嵌套的选择器，你得在 CSS 中使用 `>>>` 操作符，且在 `scss` 中使用 `/deep/`：
+
+    ``` html
+    <style scoped>
+    .a >>> .b {
+
+    }
+    </style>
+
+    <style lang="scss" scoped>
+    .a /deep/ .b {
+
+    }
+    </style>
+    ```