webpack构建时production模式与development模式有何差异

基于你这个仅引入React、ReactDOM、react-redux三个依赖、无业务逻辑的最简项目，两种模式的构建行为、处理逻辑、输出结果差异主要集中在以下几个维度：

• 代码压缩与死代码处理逻辑不同
  development模式默认不开启任何代码压缩、混淆、死代码剔除能力，会完整保留所有引入依赖的源码结构、注释、debugger语句与console调用，所有变量名、函数名全部保留原名，不会做任何裁剪。
  production模式默认内置TerserWebpackPlugin处理JS压缩混淆，同时自动开启Tree Shaking死代码剔除：你入口文件仅做了依赖导入、没有任何实际调用的话，构建阶段会把三个依赖里未被引用的代码全部裁掉，这也是两种模式输出文件体积差距极大的核心原因。

• 运行时与调试支持逻辑不同
  development模式会把webpack开发态运行时完整打包进输出文件，内置模块热替换（HMR）支持、详细的模块加载报错提示、模块路径映射逻辑，默认开启eval格式的source map，每个模块都会保留原始文件路径标注，浏览器调试时可以直接映射到原始源码位置，断点不会错位。
  production模式会对webpack运行时做极致精简，删掉所有调试相关的辅助代码，模块标识会替换成短数字ID，不保留原始文件路径注释，默认不输出便于调试的source map，模块加载错误提示会被压缩为短标识，尽可能压缩运行时代码体积。

• 环境变量注入与依赖内部分支裁剪不同
  development模式下webpack会自动将process.env.NODE_ENV静态定义为"development"，你引入的三个React生态依赖内部都基于这个变量做了分支判断：开发态会保留完整的PropTypes校验、组件渲染性能告警、开发专属错误提示逻辑，这部分代码占了依赖包相当大的体积。
  production模式下process.env.NODE_ENV会被定义为"production"，依赖内部所有开发环境专属的分支代码会在构建阶段被直接替换，对应的校验、告警、调试逻辑会被Tree Shaking完全移除，只保留生产运行必需的核心代码。

• 构建速度与缓存策略不同
  development模式配合你配置的-w监听参数时，会默认开启增量构建缓存，文件改动后只会重新编译变更的模块，不会执行压缩、混淆这类耗时操作，首次构建和增量重构建速度都很快。
  production模式默认不做增量构建优化，每次触发重构建都会执行全量的代码依赖分析、压缩、混淆、Tree Shaking流程，构建速度比development模式慢数倍，项目依赖越多这个差距越明显。

补充说明：因为你的入口文件没有任何实际调用依赖的业务代码，production模式最终输出的内容只有精简后的webpack运行时代码+极少量被标记为有副作用的依赖初始化代码，development模式输出的则是包含三个依赖全量开发版代码+完整webpack开发运行时的文件，和你实际构建得到的输出结果表现完全一致。

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