feat: disable Hot Reload option (#1036) (#1037)

Author: gejgalis

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
+      }
+    }
+  ]
+}
+```

docs/en/options.md

@@ -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.     

lib/loader.js

@@ -143,8 +143,7 @@ module.exports = function (content) {
   const postLoaders = options.postLoaders || {}
 
   const needsHotReload =
-    !isServer && !isProduction && (parts.script || parts.template)
-
+    !isServer && !isProduction && (parts.script || parts.template) && options.hotReload !== false
   if (needsHotReload) {
     output += 'var disposed = false\n'
   }

lib/template-compiler/index.js

@@ -13,7 +13,7 @@ module.exports = function (html) {
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
   const vueOptions = this.options.__vueOptions__ || {}
   const options = loaderUtils.getOptions(this) || {}
-
+  const needsHotReload = !isServer && !isProduction && vueOptions.hotReload !== false
   const defaultModules = [transformRequire(options.transformToRequire), transformSrcset()]
   let userModules = vueOptions.compilerModules || options.compilerModules
 
@@ -90,7 +90,7 @@ module.exports = function (html) {
       : `module.exports = ${exports}`
   }
   // hot-reload
-  if (!isServer && !isProduction) {
+  if (needsHotReload) {
     const exportsName = vueOptions.esModule ? 'esExports' : 'module.exports'
     code +=
       '\nif (module.hot) {\n' +

test/test.js

@@ -1027,4 +1027,28 @@ describe('vue-loader', () => {
       vnode.children[6].data.on.click()
     })
   })
+
+  it('hot reload enabled', done => {
+    bundle({
+      entry: './test/fixtures/basic.vue',
+      vue: {
+        hotReload: true
+      }
+    }, (code) => {
+      expect(code).to.contains('require("vue-hot-reload-api")')
+      done()
+    })
+  })
+
+  it('hot reload disabled', done => {
+    bundle({
+      entry: './test/fixtures/basic.vue',
+      vue: {
+        hotReload: false
+      }
+    }, (code) => {
+      expect(code).not.to.contains('require("vue-hot-reload-api")')
+      done()
+    })
+  })
 })