Allow HMR on node.js target

What problem does this feature solve?

Hello!

At the moment, hot reload code is not injected to node.js SSR environment. vue-loader has a config option "hotReload" that may enable or disable HMR code injection when component is compiled. However, this option is explicitly set as false when webpack "target" is "node".

As a background - we have custom backend application that is responsible for managing our server side logic, api proxy and SSR. Application is quite heavy and requires several seconds to launch. For now we have been using Nodemon in development to restart our server application. However, when developing certain components, after HMR rerenders them on frontend side, Nodemon restarts our server causing a few-second blackout during which, front component tries to get data from API and failing with connection refused.

I was trying to implement HMR on our SSR server, to not force restarting our backend everytime component change, and while it didnt restarted, it keept serving old component from SSR, causing mismatch during hydration. After several hours of debugging, I found out that no HMR code is included on node.js code and found out that this line is responsible for that:

vue-loader/lib/index.js:103

const needsHotReload = (
    !isServer &&
    !isProduction &&
    (descriptor.script || descriptor.template) &&
    options.hotReload !== false
  )

I've commented out the !isServer line and now HMR code is emitted and our backend serves fresh components in development without requiring to restart the server. Unfortunately, there is no way to force emitting HMR code on backend as hotReload: true flag is ignored on node.js target.

I'd like to have option hotReload: true to ignore environment and just let me set HMR as I'd want to do, because for now the only way to achieve it is to fork vue-loader and remove this line. I think that auto-judging whether we should use HMR or not should occur only when user do not pass "hotReload" config option at all, but when I explicitly want HMR in my backend config, I'd expect framework to let me do it.

What does the proposed API look like?

When I pass hotReload option explicitly, the framework should not decide for me:

        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            hotReload: (envConfig.isProduction) ? false : true,
          },
        },

vuejs / vue-loader

Allow HMR on node.js target #1622

What problem does this feature solve?

What does the proposed API look like?