Webpack-dev-server has built-in support for HMR

This is enabled only by configuring Hot hotOnly (or by using command line arguments which have a higher priority)

Remember that starting HMR in early versions of WebPack was cumbersome, confusing, and sometimes ineffective.

At present[email protected]Version of the built-in logic

Either starting webpack-dev-server from the command line or starting webpack-dev-server from the Node API eventually initializes this class

class Server { constructor(compiler, options = {}, _log) { ... // here is the entry to add HMR script updateCompiler(this.piler, this.options); . }}Copy the code

updateCompiler

Function updateCompiler () {/ / is also supported the automatic add HotModuleReplacementPlugin so we can be ignored in the configuration of const findHMRPlugin = (config) = > {the if (! config.plugins) { return undefined; } return config.plugins.find( (plugin) => plugin.constructor === webpack.HotModuleReplacementPlugin ); }; // actually do the logic to addEntries(webpackConfig, options); }Copy the code

addEntries(webpackConfig, options);

function addEntries() { ... Const clientEntry = '${require. Resolve ('.. /.. /client/' )}? ${domain}${sockHost}${sockPath}${sockPort}`; // Client is responsible for HMR or live-reload logic let hotEntry; if (options.hotOnly) { hotEntry = require.resolve('webpack/hot/only-dev-server'); } else if (options.hot) { hotEntry = require.resolve('webpack/hot/dev-server'); } // Const webTarget = ['web', 'webworker', 'electron-renderer', 'node-webkit', undefined, // eslint-disable-line null, ].includes(config.target); /** @type {Entry} */ const additionalEntries = checkInject( options.injectClient, config, webTarget ) ? [clientEntry] : []; HotEntry if (hotEntry && checkInject(options.injecthot, config, true)) {additionalEntries. Push (hotEntry); }... }Copy the code

Pay attention to the point target

Refer to the official documentation: webpack.js.org/configurati…