Merge remote-tracking branch 'upstream/master' into working

# Conflicts:
#	README.md

Author: MachinisteWeb

Diff for: docs/en/README.md

@@ -1,6 +1,6 @@
 # Introduction
 
-### What is `vue-loader`?
+### What is Vue Loader?
 
 `vue-loader` is a loader for webpack that can transform Vue components written in the following format into a plain JavaScript module:
 
@@ -9,7 +9,7 @@
 There are many cool features provided by `vue-loader`:
 
 - ES2015 enabled by default;
-- Allows using other webpack loaders for each part of a Vue component, for example SASS for `<style>` and Jade for `<template>`;
+- Allows using other webpack loaders for each part of a Vue component, for example Sass for `<style>` and Jade for `<template>`;
 - Allows custom sections in a .vue file that can have custom loader chains applied to them
 - Treat static assets referenced in `<style>` and `<template>` as module dependencies and handle them with webpack loaders;
 - Can simulate scoped CSS for each component;
@@ -32,7 +32,7 @@ But webpack can do more than that. With "loaders", we can teach webpack to trans
 - Transpile ES2015, CoffeeScript or TypeScript modules into plain ES5 CommonJS modules;
 - Optionally you can pipe the source code through a linter before doing the compilation;
 - Transpile Jade templates into plain HTML and inline it as a JavaScript string;
-- Transpile SASS files into plain CSS, then convert it into a JavaScript snippet that insert the resulting CSS as a `<style>` tag;
+- Transpile Sass files into plain CSS, then convert it into a JavaScript snippet that insert the resulting CSS as a `<style>` tag;
 - Process an image file referenced in HTML or CSS, moved it to the desired destination based on the path configurations, and naming it using its md5 hash.
 
 webpack is so powerful that when you understand how it works, it can dramatically improve your front-end workflow. Its primary drawback is its verbose and complex configuration; but with this guide you should be able to find solutions for most common issues when using webpack with Vue.js and `vue-loader`.

Diff for: docs/en/SUMMARY.md

@@ -18,7 +18,6 @@
   - [Production Build](workflow/production.md)
   - [Linting](workflow/linting.md)
   - [Testing](workflow/testing.md)
-  - [Testing with Mocks](workflow/testing-with-mocks.md)
 - [Options Reference](options.md)
   - [loaders](options.md#loaders)
   - [preLoaders](options.md#preloaders)
@@ -34,4 +33,3 @@
   - [buble](options.md#buble)
   - [extractCSS](options.md#extractcss)
   - [optimizeSSR](options.md#optimizessr)
-  - [cacheBusting](options.md#cachebusting)

Diff for: docs/en/configurations/advanced.md

@@ -12,8 +12,6 @@ To do that, specify the `loaders` option for `vue-loader`:
 
 > Note that `preLoaders` and `postLoaders` are only supported in 10.3.0+
 
-### webpack 2.x
-
 ``` js
 module.exports = {
   // other options...
@@ -25,8 +23,8 @@ module.exports = {
         loader: 'vue-loader',
         options: {
           // `loaders` will overwrite the default loaders.
-          // The following config will cause all <script> tags without "lang"
-          // attribute to be loaded with coffee-loader
+          // The following config will cause all `<script>` tags without `lang`
+          // attribute to be loaded with `coffee-loader`
           loaders: {
             js: 'coffee-loader'
           },
@@ -43,8 +41,8 @@ module.exports = {
           // - For `html`, the result returned by the default loader
           //   will be compiled JavaScript render function code.
           //
-          // - For `css`, the result will be returned by vue-style-loader
-          //   which isn't particularly useful in most cases. Using a postcss
+          // - For `css`, the result will be returned by `vue-style-loader`
+          //   which isn't particularly useful in most cases. Using a PostCSS
           //   plugin will be a better option.
           postLoaders: {
             html: 'babel-loader'
@@ -59,27 +57,4 @@ module.exports = {
 }
 ```
 
-### webpack 1.x
-
-``` js
-// webpack.config.js
-module.exports = {
-  // other options...
-  module: {
-    loaders: [
-      {
-        test: /\.vue$/,
-        loader: 'vue'
-      }
-    ]
-  },
-  // `vue-loader` configurations
-  vue: {
-    loaders: {
-      // same configuration rules as above
-    }
-  }
-}
-```
-
 A more practical usage of the advanced loader configuration is [extracting CSS inside components into a single file](./extract-css.md).

Diff for: docs/en/configurations/asset-url.md

@@ -14,8 +14,26 @@ will be compiled into:
 createElement('img', { attrs: { src: require('../image.png') }})
 ```
 
+### Transform Rules
+
+- If the URL is an absolute path (e.g. `/images/foo.png`), it will be preserved as-is.
+
+- If the URL starts with `.`, it's interpreted as a relative module request and resolved based on the folder structure on your file system.
+
+- If the URL starts with `~`, anything after it is interpreted as a module request. This means you can even reference assets inside node modules:
+
+  ``` html
+  <img src="~/some-npm-package/foo.png">
+  ```
+
+- (13.7.0+) If the URL starts with `@`, it's also interpreted as a module request. This is useful if your webpack config has an alias for `@`, which by default points to `/src` in any project created by `vue-cli`.
+
+### Related Loaders
+
 Because `.png` is not a JavaScript file, you will need to configure webpack to use [file-loader](https://github.com/webpack/file-loader) or [url-loader](https://github.com/webpack/url-loader) to handle them. The project scaffolded with `vue-cli` has also configured this for you.
 
+### Why
+
 The benefits of all this are:
 
 1. `file-loader` allows you to designate where to copy and place the asset file, and how to name it using version hashes for better caching. Moreover, this also means **you can just place images next to your `*.vue` files and use relative paths based on the folder structure instead of worrying about deployment URLs**. With proper config, webpack will auto-rewrite the file paths into correct URLs in the bundled output.

Diff for: docs/en/configurations/custom-blocks.md

@@ -41,7 +41,6 @@ comp-a h2 {
 #### webpack.config.js
 
 ``` js
-// webpack 2.x
 var ExtractTextPlugin = require("extract-text-webpack-plugin")
 
 module.exports = {

Diff for: docs/en/configurations/extract-css.md

@@ -39,9 +39,6 @@ Note this only extracts `*.vue` files though - CSS imported in JavaScript still
 
 Example config to extract all the processed CSS in all Vue components into a single CSS file:
 
-### webpack 2.x
-
-
 ``` js
 // webpack.config.js
 var ExtractTextPlugin = require("extract-text-webpack-plugin")
@@ -69,36 +66,3 @@ module.exports = {
   ]
 }
 ```
-
-### webpack 1.x
-
-``` bash
-npm install extract-text-webpack-plugin --save-dev
-```
-
-``` js
-// webpack.config.js
-var ExtractTextPlugin = require("extract-text-webpack-plugin")
-
-module.exports = {
-  // other options...
-  module: {
-    loaders: [
-      {
-        test: /\.vue$/,
-        loader: 'vue'
-      },
-    ]
-  },
-  vue: {
-    loaders: {
-      css: ExtractTextPlugin.extract("css"),
-      // you can also include <style lang="less"> or other langauges
-      less: ExtractTextPlugin.extract("css!less")
-    }
-  },
-  plugins: [
-    new ExtractTextPlugin("style.css")
-  ]
-}
-```

Diff for: docs/en/configurations/pre-processors.md

@@ -4,7 +4,7 @@ In webpack, all pre-processors need to be applied with a corresponding loader. `
 
 ### CSS
 
-For example, let's compile our `<style>` tag with SASS:
+For example, let's compile our `<style>` tag with Sass:
 
 ``` bash
 npm install sass-loader node-sass --save-dev
@@ -20,7 +20,7 @@ Under the hood, the text content inside the `<style>` tag will be first compiled
 
 #### sass-loader caveat
 
-Contrary to what its name indicates, [*sass*-loader](https://github.com/jtangelder/sass-loader) parses *SCSS* syntax by default. If you actually want to use the indented *SASS* syntax, you have to configure vue-loader's options for sass-loader accordingly.
+Contrary to what its name indicates, [*sass*-loader](https://github.com/jtangelder/sass-loader) parses *SCSS* syntax by default. If you actually want to use the indented *Sass* syntax, you have to configure vue-loader's options for sass-loader accordingly.
 
 ```javascript
 {

Diff for: docs/en/features/css-modules.md

@@ -81,25 +81,14 @@ CSS Modules are processed via [css-loader](https://github.com/webpack/css-loader
 ``` js
 {
   modules: true,
-  importLoaders: true,
+  importLoaders: 1,
   localIdentName: '[hash:base64]'
 }
 ```
 
 You can use vue-loader's `cssModules` option to provide additional query options to `css-loader`:
 
 ``` js
-// webpack 1
-vue: {
-  cssModules: {
-    // overwrite local ident name
-    localIdentName: '[path][name]---[local]---[hash:base64:5]',
-    // enable camelCase
-    camelCase: true
-  }
-}
-
-// webpack 2
 module: {
   rules: [
     {

Diff for: docs/en/features/es2015.md

@@ -48,7 +48,7 @@ can be simplified to:
 
 ``` html
 <my-component>
-  <template scope="{ id, text }">
+  <template slot-scope="{ id, text }">
     <span>{{ id }} {{ text }}</span>
   </template>
 </my-component>

Diff for: docs/en/features/postcss.md

@@ -4,32 +4,30 @@ Any CSS output processed by `vue-loader` is piped through [PostCSS](https://gith
 
 ## Using a Config File
 
-Starting in 11.0 `vue-loader` supports auto-loading the same PostCss config files supported by [`postcss-loader`](https://github.com/postcss/postcss-loader#usage):
+`vue-loader` supports auto-loading the same PostCss config files supported by [`postcss-loader`](https://github.com/postcss/postcss-loader#usage):
 
 - `postcss.config.js`
 - `.postcssrc`
 - `postcss` field in `package.json`
 
 Using a config file allows you to share the same config between your normal CSS files processed by `postcss-loader` and the CSS inside `*.vue` files, and is recommended.
 
-## Inline Options
+## Using with `postcss-loader`
 
-Alternatively, you can specify postcss config specifically for `*.vue` files using the `postcss` option for `vue-loader`.
+Since `vue-loader` handles PostCSS on its styles internally, you only need to apply `postcss-loader` to standalone CSS files. There's no need to specify `lang="postcss"` on a style block if there is a PostCSS config file in your project.
 
-Example usage in webpack 1.x:
+Sometimes the user may want to use `lang="postcss"` only for syntax highlighting purposes. Starting in 13.6.0, if no loader has been explicitly configured for the following common PostCSS extensions (via `vue-loader`'s own `loaders` option), they will simply go through `vue-loader`'s default PostCSS transforms:
 
-``` js
-// webpack.config.js
-module.exports = {
-  // other configs...
-  vue: {
-    // use custom postcss plugins
-    postcss: [require('postcss-cssnext')()]
-  }
-}
-```
+- `postcss`
+- `pcss`
+- `sugarss`
+- `sss`
+
+## Inline Options
 
-For webpack 2.x:
+Alternatively, you can specify PostCSS config specifically for `*.vue` files using the `postcss` option for `vue-loader`.
+
+Example:
 
 ``` js
 // webpack.config.js
@@ -66,3 +64,17 @@ In addition to providing an Array of plugins, the `postcss` option also accepts:
     }
   }
   ```
+
+### Disabling Auto Config File Loading
+
+In `13.6.0+`, auto PostCSS config file loading can be disabled by specifying `postcss.useConfigFile: false`:
+
+``` js
+postcss: {
+  useConfigFile: false,
+  plugins: [/* ... */],
+  options: {/* ... */}
+}
+```
+
+This allows the PostCSS configuration inside `*.vue` files to be entirely controlled by the inline config.

Diff for: docs/en/features/scoped-css.md

@@ -64,7 +64,7 @@ The above will be compiled into:
 .a[data-v-f3f3eg9] .b { /* ... */ }
 ```
 
-Some pre-processors, such as SASS, may not be able to parse `>>>` properly. In those cases you can use the `/deep/` combinator instead - it's an alias for `>>>` and works exactly the same.
+Some pre-processors, such as Sass, may not be able to parse `>>>` properly. In those cases you can use the `/deep/` combinator instead - it's an alias for `>>>` and works exactly the same.
 
 ### Dynamically Generated Content