为何使用Webpack时dist/main.js仅包含index.js代码而非更多？

你遇到的差异完全是Webpack 4到Webpack 5的版本迭代带来的默认行为变化，不属于操作或配置问题，具体原因如下：

• 默认配置大幅精简：四年前的教程应该基于Webpack 4，当时即使是最简单的单入口项目，Webpack也会默认打包进大量runtime模块加载逻辑、模块缓存代码等基础框架代码。而Webpack 5对默认配置做了针对性优化，对于仅包含简单业务代码（比如单个alert）的场景，会自动剔除不必要的冗余runtime代码，只保留与业务直接相关的部分。

• 优化能力默认开启：Webpack 5默认启用了更强的Tree Shaking、模块合并（concatenateModules）等优化策略，能精准识别并移除未被使用的代码。如果你的项目没有引入额外依赖、没有复杂的模块交互，打包后的产物自然会非常精简。

• 开发模式的优化调整：Webpack 5在开发模式下也弱化了不必要的调试冗余代码输出，不像Webpack 4那样默认携带大量便于调试但冗余的代码结构，进一步缩小了开发模式下bundle的体积。

验证方法 #

如果想确认这一点，可以做个简单测试：

1. 在src/index.js中引入一个第三方模块，比如import _ from 'lodash'并使用它（比如console.log(_.join(['a','b'], '-'))）
2. 重新执行npm start打包
3. 查看dist/main.js，你会发现里面已经包含了模块加载逻辑和第三方模块的打包代码，和旧教程里的现象就会更接近了

内容的提问来源于stack exchange，提问作者Alim Gölcük