区分生产环境和开发环境后，为什么webpack就不会打包开发环境的依赖

Question

为什么区分生产环境和开发环境？

以前网上一搜说的就是：若发到线上，其实就不需要devDependencies下的所有依赖包，webpack就不会去打包devDependencies的依赖，why？

引用devDependencies依赖是在哪里

是因为webpack的config里require了一些插件，应该是这里引用了一些开发环境才需要的插件，所以默认是要给你打入到包里。然后我把这些插件放到devDependencies里，webpack就默认跳过了（是默认配置了吗）？

这样还需要区分生产环境和开发环境吗？

最近在研究webpack的配置，如果真的是上面说的是在config里require了一些插件，那配置的打包js模块的时候就忽略掉那些config.js结尾的文件里引用的依赖，那是不是就不用再特意的去区分生产环境和开发环境了————天真的我:)

Answer 1

若发到线上，其实就不需要devDependencies下的所有依赖包，webpack就不会去打包devDependencies的依赖，why？

上面的这句话看上去正确，其实没有多少关联性，也没有强因果关系。依赖项是否被 webpack 打包进 bundle 是看入口 main 是否在调用中有模块引用。

devDependencies有两个含义，一个含义是放在 package.json 中与模块的依赖 dependencies 做区分，表示是开发环境所需，实际上所有的开发依赖完全可以放在 dependencies 中；另一个含义则可能涉及到加载的优先级问题，例如二者中都有某种相同的模块依赖或者依赖的依赖，但是版本是不同的，当引用时到底引入哪个的问题？

Answer 2

1 可能webpack打包的项目不太明显，像是nodejs的项目的话会比较明显一点，像是开发的时候需要nodemon，但生产不需要，因此你放到服务器上就可以之安装生产包

2 webpack.config.js的那些文件里吧，其实感觉webpack打包需要这些包，但是又把他们放在dev里，确实有点不和逻辑

Answer 3

如果你看过一些源码应该会知道，很多npm包分辨开发环境和线上环境都是通过process.env.NODE_ENV这个环境变量去区分的，而不是通过包是否在devDependencies的集合中来分辨。所以当我们设置了webpackConfig的mode为production时，实际上也设置了process.env.NODE_ENV这个环境变量；
比如下面的Redux npm包

if (process.env.NODE_ENV !== 'production') {
  if (typeof reducers[key] === 'undefined') {
    warning(`No reducer provided for key "${key}"`)
  }
}