前端Webpack打包单文件时，package.json依赖配置疑问

这问题我碰到好多人问过，其实核心得先搞清楚dependencies和devDependencies的本质区别，再结合Webpack的打包逻辑来看：

先明确核心逻辑 #

Webpack的作用就是把你写的代码，加上所有你通过import/require引入的依赖代码，全部打包成（或拆分多个）浏览器能直接运行的JS文件。一旦打包完成，最终部署到服务器上的是这些打包后的文件，完全不需要把node_modules文件夹传上去——因为依赖的代码已经被塞进bundle里了。

分场景说结论 #

1. 你开发的是纯前端应用（比如SPA、静态网站） #

这种情况下，所有被Webpack打包进bundle的依赖，都可以放心地放在devDependencies里，不用再往dependencies里塞了。

举个例子：你用了lodash，在代码里写import _ from 'lodash'，Webpack会把lodash的代码打包进你的主JS文件，用户浏览器运行时根本不需要去加载node_modules里的lodash，所以lodash完全可以用npm install --save-dev lodash安装。

唯一要注意的特殊情况：如果你用了Webpack的代码分割，把某些依赖拆成了单独的chunk（比如动态导入的模块），只要这些chunk最终是和主bundle一起部署的，那这些依赖依然可以放在devDependencies里——因为它们还是被Webpack处理成了浏览器能直接运行的文件，不需要生产环境的node_modules。

2. 你开发的是前端库/组件库（供其他项目安装使用） #

虽然你说的是前端开发实现场景，但还是提一句：如果你的库代码依赖了某个包（比如React），并且你在Webpack里配置了externals把这个依赖排除在打包之外（让使用你的库的项目自己提供这个依赖），那这个依赖必须放在dependencies里，不然别人安装你的库时，不会自动安装这个必要的运行时依赖。

常见误区澄清 #

很多人一开始会把所有依赖都放进dependencies，其实dependencies的设计初衷是生产环境运行时必须存在的依赖——比如后端项目里，生产服务器需要加载某些npm包来运行代码。但前端应用打包后，依赖已经被嵌入到静态文件里了，生产环境根本不需要node_modules，所以完全没必要把这些依赖放在dependencies里。

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