webpack-dev-server中hot:true与hot:only的差异解析及构建失败场景疑问

Hey there! Since you already have a solid grasp of HMR's underlying mechanics (server and runtime), let's cut straight to the core differences and the scenarios that trigger the "build failures" mentioned in the docs.

Core Differences Between hot:true and hot:'only' #

The key distinction lies in how webpack-dev-server reacts when an HMR update fails (or a build error occurs during the HMR process):

• With hot:true: If the HMR runtime can't successfully apply the module update (or the build itself fails), the dev server will automatically trigger a full page refresh. This ensures you're always looking at the latest valid build, but it means losing any current page state (like form inputs, app state, etc.).
• With hot:'only': Even if the HMR update fails or a build error occurs, the dev server will never refresh the page. Instead, it'll log the error details to the console, leaving your current page state intact. This is exactly what the docs mean by "falling back to HMR without page refresh on build failure"—it prioritizes preserving your work over forcing a fresh build.

Scenarios That Trigger "Build Failures" (HMR or Full Build) #

These are the common cases that would trigger the different behaviors above:

• Syntax errors in your code: Unclosed brackets, undefined variables in JS, invalid selectors or properties in CSS/SCSS, etc.
• Failed module resolution: Trying to import a file that doesn't exist, or a dependency package that hasn't been installed.
• Loader processing errors: Misconfigured loaders (e.g., babel-loader missing a preset, sass-loader unable to compile a partial) that break the build pipeline.
• Plugin execution failures: A webpack plugin throwing an error during its processing step (e.g., a minification plugin choking on invalid code).
• HMR-specific handling errors: Modules that don't properly implement module.hot.accept, or logic in your HMR update hooks that throws an error (preventing the runtime from applying the update).

Quick Recap for Your Use Case #

If you're working on an app where preserving page state during debugging is critical (like a complex form or a state-heavy SPA), hot:'only' is the way to go—you can fix errors without losing your current work. If you prefer always seeing the latest valid build even if it means a refresh, stick with hot:true.

内容的提问来源于stack exchange，提问作者jwkoo