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

Author: MachinisteWeb

Diff for: docs/en/README.md

@@ -2,37 +2,37 @@
 
 ### 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:
+`vue-loader` is a loader for webpack that can transform Vue components written in the following format into a plain JavaScript module:
 
 ![screenshot](http://blog.evanyou.me/images/vue-component.png)
 
 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;
+- Treat static assets referenced in `<style>` and `<template>` as module dependencies and handle them with webpack loaders;
 - Can simulate scoped CSS for each component;
 - Supports component hot-reloading during development.
 
-In a nutshell, the combination of Webpack and `vue-loader` gives you a modern, flexible and extremely powerful front-end workflow for authoring Vue.js applications.
+In a nutshell, the combination of webpack and `vue-loader` gives you a modern, flexible and extremely powerful front-end workflow for authoring Vue.js applications.
 
-### What is Webpack?
+### What is webpack?
 
-If you are already familiar with Webpack, feel free to skip the following explanation. But for those of you who are new to Webpack, here's a quick intro:
+If you are already familiar with webpack, feel free to skip the following explanation. But for those of you who are new to webpack, here's a quick intro:
 
-[Webpack](https://webpack.github.io/) is a module bundler. It takes a bunch of files, treating each as a module, figuring out the dependencies between them, and bundle them into static assets that are ready for deployment.
+[webpack](https://webpack.github.io/) is a module bundler. It takes a bunch of files, treating each as a module, figuring out the dependencies between them, and bundle them into static assets that are ready for deployment.
 
 ![webpack](https://webpack.github.io/assets/what-is-webpack.png)
 
-For a basic example, imagine we have a bunch of CommonJS modules. They cannot run directly inside the browser, so we need to "bundle" them into a single file that can be included via a `<script>` tag. Webpack can follow the dependencies of the `require()` calls and do that for us.
+For a basic example, imagine we have a bunch of CommonJS modules. They cannot run directly inside the browser, so we need to "bundle" them into a single file that can be included via a `<script>` tag. webpack can follow the dependencies of the `require()` calls and do that for us.
 
-But Webpack can do more than that. With "loaders", we can teach Webpack to transform all types of files in any way we want before outputting the final bundle. Some examples include:
+But webpack can do more than that. With "loaders", we can teach webpack to transform all types of files in any way we want before outputting the final bundle. Some examples include:
 
 - 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;
 - 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`.
+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/configurations/advanced.md

@@ -12,13 +12,13 @@ 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
+### webpack 2.x
 
 ``` js
 module.exports = {
   // other options...
   module: {
-    // module.rules is the same as module.loaders in 1.x
+    // `module.rules` is the same as `module.loaders` in 1.x
     rules: [
       {
         test: /\.vue$/,
@@ -49,7 +49,7 @@ module.exports = {
           postLoaders: {
             html: 'babel-loader'
           },
-          
+
           // `excludedPreLoaders` should be regex
           excludedPreLoaders: /(eslint-loader)/
         }
@@ -59,7 +59,7 @@ module.exports = {
 }
 ```
 
-### Webpack 1.x
+### webpack 1.x
 
 ``` js
 // webpack.config.js
@@ -73,7 +73,7 @@ module.exports = {
       }
     ]
   },
-  // vue-loader configurations
+  // `vue-loader` configurations
   vue: {
     loaders: {
       // same configuration rules as above

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

@@ -14,10 +14,10 @@ will be compiled into:
 createElement('img', { attrs: { src: require('../image.png') }})
 ```
 
-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.
+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.
 
 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.
+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.
 
 2. `url-loader` allows you to conditionally inline a file as base-64 data URL if they are smaller than a given threshold. This can reduce the amount of HTTP requests for trivial files. If the file is larger than the threshold, it automatically falls back to `file-loader`.

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

@@ -4,7 +4,7 @@
 
 You can define custom language blocks inside `*.vue` files. The content of a custom block will be processed by the loaders specified in the `loaders` object of `vue-loader` options and then required by the component module. The configuration is similar to what is described in [Advanced Loader Configuration](../configurations/advanced.md), except the matching uses the tag name instead of the `lang` attribute.
 
-If a matching loader is found for a custom block, it will be processed; otherwise the custom block will simply be ignored. Additionally, if the found loader returns a function, that function will be called with the component of the `*.vue` file as a parameter. 
+If a matching loader is found for a custom block, it will be processed; otherwise the custom block will simply be ignored. Additionally, if the found loader returns a function, that function will be called with the component of the `*.vue` file as a parameter.
 
 ## Single docs file example
 
@@ -41,15 +41,15 @@ comp-a h2 {
 #### webpack.config.js
 
 ``` js
-// Webpack 2.x
+// webpack 2.x
 var ExtractTextPlugin = require("extract-text-webpack-plugin")
 
 module.exports = {
   module: {
     rules: [
       {
         test: /\.vue$/,
-        loader: 'vue',
+        loader: 'vue-loader',
         options: {
           loaders: {
             // extract all <docs> content as raw text
@@ -68,11 +68,13 @@ module.exports = {
 
 ## Runtime available docs
 
+> Requires 11.3.0+
+
 Here's an example of injecting the `<docs>` custom blocks into the component so that it's available during runtime.
 
-#### docs-loader.js 
+#### docs-loader.js
 
-In order for the custom block content to be injected, we'll need a custom loader: 
+In order for the custom block content to be injected, we'll need a custom loader:
 
 ``` js
 module.exports = function (source, map) {
@@ -94,7 +96,7 @@ module.exports = {
     rules: [
       {
         test: /\.vue$/,
-        loader: 'vue',
+        loader: 'vue-loader',
         options: {
           loaders: {
             'docs': docsLoader
@@ -108,7 +110,7 @@ module.exports = {
 
 #### component.vue
 
-We are now able to access the `<docs>` block's content of imported components during runtime. 
+We are now able to access the `<docs>` block's content of imported components during runtime.
 
 ``` html
 <template>

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

@@ -39,7 +39,7 @@ 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
+### webpack 2.x
 
 
 ``` js
@@ -70,7 +70,7 @@ module.exports = {
 }
 ```
 
-### Webpack 1.x
+### webpack 1.x
 
 ``` bash
 npm install extract-text-webpack-plugin --save-dev

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

@@ -1,6 +1,6 @@
 # Using Pre-Processors
 
-In Webpack, all pre-processors need to be applied with a corresponding loader. `vue-loader` allows you to use other Webpack loaders to process a part of a Vue component. It will automatically infer the proper loaders to use from the `lang` attribute of a language block.
+In webpack, all pre-processors need to be applied with a corresponding loader. `vue-loader` allows you to use other webpack loaders to process a part of a Vue component. It will automatically infer the proper loaders to use from the `lang` attribute of a language block.
 
 ### CSS
 
@@ -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
 {
@@ -69,7 +69,7 @@ scss: generateLoaders('sass').concat(
 ),
 ```
 
-It is recommended to only include variables, mixins, etc. in this file, to prevent duplicated css in your final, compiled files. 
+It is recommended to only include variables, mixins, etc. in this file, to prevent duplicated css in your final, compiled files.
 
 ### JavaScript
 
@@ -87,7 +87,7 @@ npm install coffee-loader --save-dev
 
 ### Templates
 
-Processing templates is a little different, because most Webpack template loaders such as `pug-loader` return a template function instead of a compiled HTML string. Instead of using `pug-loader`, we can just install the original `pug`:
+Processing templates is a little different, because most webpack template loaders such as `pug-loader` return a template function instead of a compiled HTML string. Instead of using `pug-loader`, we can just install the original `pug`:
 
 ``` bash
 npm install pug --save-dev
@@ -104,12 +104,12 @@ div
 
 ### Inline Loader Requests
 
-You can use [Webpack loader requests](https://webpack.github.io/docs/loaders.html#introduction) in the `lang` attribute:
+You can use [webpack loader requests](https://webpack.github.io/docs/loaders.html#introduction) in the `lang` attribute:
 
 ``` html
 <style lang="sass?outputStyle=expanded">
   /* use sass here with expanded output */
 </style>
 ```
 
-However, note this makes your Vue component Webpack-specific and not compatible with Browserify and [vueify](https://github.com/vuejs/vueify). **If you intend to ship your Vue component as a reusable 3rd-party component, avoid using this syntax.**
+However, note this makes your Vue component webpack-specific and not compatible with Browserify and [vueify](https://github.com/vuejs/vueify). **If you intend to ship your Vue component as a reusable 3rd-party component, avoid using this syntax.**

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

@@ -58,7 +58,7 @@ You can also customize the features supported in templates using the [`buble` op
 
 ### Transpiling Normal `.js` Files
 
-Since `vue-loader` only processes `*.vue` files, you'd need to tell Webpack to process normal `*.js` files with `babel-loader` or `buble-loader` in the Webpack config file. The project scaffolded with `vue-cli` already does it for you.
+Since `vue-loader` only processes `*.vue` files, you'd need to tell webpack to process normal `*.js` files with `babel-loader` or `buble-loader` in the webpack config file. The project scaffolded with `vue-cli` already does it for you.
 
 ### Configuring Babel with `.babelrc`
 

Diff for: docs/en/features/hot-reload.md

@@ -19,3 +19,27 @@ When scaffolding the project with `vue-cli`, Hot Reload is enabled out-of-the-bo
 When manually setting up your project, hot-reload is enabled automatically when you serve your project with `webpack-dev-server --hot`.
 
 Advanced users may want to check out [vue-hot-reload-api](https://github.com/vuejs/vue-hot-reload-api), which is used internally by `vue-loader`.
+
+## Disabling Hot Reload
+
+Hot Reload is always enabled except following situations:
+
+ * webpack `target` is `node` (SSR)
+ * webpack minifies the code
+ * `process.env.NODE_ENV === 'production'`
+
+You may use `hotReload: false` option to disable the Hot Reload explicitly:
+
+``` js
+module: {
+  rules: [
+    {
+      test: /\.vue$/,
+      loader: 'vue-loader',
+      options: {
+        hotReload: false // disables Hot Reload
+      }
+    }
+  ]
+}
+```

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

@@ -16,7 +16,7 @@ Using a config file allows you to share the same config between your normal CSS
 
 Alternatively, you can specify postcss config specifically for `*.vue` files using the `postcss` option for `vue-loader`.
 
-Example usage in Webpack 1.x:
+Example usage in webpack 1.x:
 
 ``` js
 // webpack.config.js
@@ -29,19 +29,19 @@ module.exports = {
 }
 ```
 
-For Webpack 2.x:
+For webpack 2.x:
 
 ``` js
 // webpack.config.js
 module.exports = {
   // other options...
   module: {
-    // module.rules is the same as module.loaders in 1.x
+    // `module.rules` is the same as `module.loaders` in 1.x
     rules: [
       {
         test: /\.vue$/,
         loader: 'vue-loader',
-        // vue-loader options goes here
+        // `vue-loader` options goes here
         options: {
           // ...
           postcss: [require('postcss-cssnext')()]
@@ -62,7 +62,7 @@ In addition to providing an Array of plugins, the `postcss` option also accepts:
   postcss: {
     plugins: [...], // list of plugins
     options: {
-      parser: sugarss // use sugarss parser
+      parser: 'sugarss' // use sugarss parser
     }
   }
   ```

Diff for: docs/en/options.md

@@ -1,8 +1,8 @@
 # Options Reference
 
-## Usage Difference Between Webpack 1 & 2
+## Usage Difference Between webpack 1 & 2
 
-For Webpack 2: pass the options directly to the loader rule.
+For webpack 2: pass the options directly to the loader rule.
 
 ``` js
 module.exports = {
@@ -13,21 +13,21 @@ module.exports = {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
-          // vue-loader options
+          // `vue-loader` options
         }
       }
     ]
   }
 }
 ```
 
-For Webpack 1.x: add a root `vue` block in your Webpack config.
+For webpack 1.x: add a root `vue` block in your webpack config.
 
 ``` js
 module.exports = {
   // ...
   vue: {
-    // vue-loader options
+    // `vue-loader` options
   }
 }
 ```
@@ -36,7 +36,7 @@ module.exports = {
 
 - type: `{ [lang: string]: string }`
 
-  An object specifying Webpack loaders to overwrite the default loaders used for language blocks inside `*.vue` files. The key corresponds to the `lang` attribute for language blocks, if specified. The default `lang` for each type is:
+  An object specifying webpack loaders to overwrite the default loaders used for language blocks inside `*.vue` files. The key corresponds to the `lang` attribute for language blocks, if specified. The default `lang` for each type is:
 
   - `<template>`: `html`
   - `<script>`: `js`
@@ -45,7 +45,7 @@ module.exports = {
   For example, to use `babel-loader` and `eslint-loader` to process all `<script>` blocks:
 
   ``` js
-  // Webpack 2.x config
+  // webpack 2.x config
   module: {
     rules: [
       {
@@ -144,7 +144,7 @@ module.exports = {
 
   Whether to enable source maps for CSS. Disabling this can avoid some relative path related bugs in `css-loader` and make the build a bit faster.
 
-  Note this is automatically set to `false` if the `devtool` option is not present in the main Webpack config.
+  Note this is automatically set to `false` if the `devtool` option is not present in the main webpack config.
 
 ### esModule
 
@@ -183,7 +183,7 @@ module.exports = {
 - type: `{ [tag: string]: string | Array<string> }`
 - default: `{ img: 'src', image: 'xlink:href' }`
 
-  During template compilation, the compiler can transform certain attributes, such as `src` URLs, into `require` calls, so that the target asset can be handled by Webpack. The default config transforms the `src` attribute on `<img>` tags and `xlink:href` attribute on `<image>` tags of SVG.
+  During template compilation, the compiler can transform certain attributes, such as `src` URLs, into `require` calls, so that the target asset can be handled by webpack. The default config transforms the `src` attribute on `<img>` tags and `xlink:href` attribute on `<image>` tags of SVG.
 
 ### buble
 
@@ -310,3 +310,14 @@ Enable Vue 2.4 SSR compilation optimization that compiles part of the vdom trees
 - default: `true` in development mode, `false` in production mode.
 
 Whether generate source maps with cache busting by appending a hash query to the file name. Turning this off can help with source map debugging.
+
+### hotReload
+
+> New in 13.5.0
+
+- type: `boolean`
+- default: `true` in development mode, `false` in production mode or when the webpack config has `target: 'node'`.
+- allowed value: `false` (`true` will not force Hot Reload neither in production mode nor when `target: 'node'`)
+
+Whether to use webpack [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/) to apply changes in the browser **without reloading the page**.
+Use this option (value `false`) to disable the Hot Reload feature in development mode.