webpack的development（开发）模式可提供哪些使用优势？

webpack development 模式核心优势说明 #

你使用的 webpack -w --mode development 启用的开发模式，核心优化方向是开发效率与调试体验，和面向线上性能、体积优化的 production 模式定位完全不同。感知不明显通常是因为项目规模小、还没用到对应调试场景，两者的核心差异如下：

• 完整调试信息保留：默认不会对代码做压缩、混淆，变量名、函数名、代码结构都会和你编写的原始内容一致，同时默认开启适配开发场景的sourcemap规则，在浏览器开发者工具中可以直接对原始源码打断点、查看变量，不需要额外配置就能定位运行时问题。如果是production模式，代码会被压缩混淆成单字符变量名，没有额外配置sourcemap的情况下几乎无法调试。
• 编译速度大幅度提升：开发模式会直接跳过所有生产环境专属的耗时优化步骤，包括tree-shaking、代码压缩、CSS提取、资源哈希计算等，配合你开启的 -w 监听模式，修改代码后的增量编译速度比production模式快数倍，项目代码量越大速度差距越明显。
• 更完善的错误提示：开发模式下的报错、警告信息会包含完整的文件路径、行号定位，部分常见错误还会附带修复建议，比如模块导入路径错误、loader配置不兼容的场景下，可以直接定位问题位置。production模式只会输出极简报错，避免泄露项目结构信息。
• 开发专属功能支持：默认开启热更新（HMR）、框架DevTools支持等开发专属能力，比如React/Vue项目的开发者工具只有在开发模式下才能正常使用，修改代码后可以直接局部更新页面内容不需要全量刷新，这些能力在production模式下都会被完全禁用。

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