webpack的开发模式和生产模式到底是什么？

Question

最近在学习webpack4，老实说，快被折磨疯了，被我自己折磨疯了，因为我喜欢研究问题研究的很深，而这也给我带来的很多的痛苦，详细可以看我的主页，最近提的问题（一些你可能从来没有考虑过的问题）。

好了，我想问的是webpack的开发模式和生产模式到底是什么？或者说，开发模式做了些什么，生产模式做了些什么？

有人肯定说用于本地开发的就是开发模式啊，mode设为development，加上一些开发配置，比如devtool，热更新之类的就是开发模式，可以在本地浏览器及时看到数据，多好，这就是开发模式。

但我们在想的深入一点，我们都知道，webpack打包依赖于package.json，而package.json里有一个放置开发模式依赖的模块devDependencies和一个放置生产模式依赖的dependencies，package.json里面有个开发模式devDependencies，webpack.config.js里有个开发模式mode：development，两者什么关系？

webpack打包的时候，这个devDependencies干了什么？有人说没有打包进最后的js里，那么请看我之前提的问题，我把jquery模块放在devDependencies里面，最后打包后的js依然可以运行，说明devDependencies里面的模块被打包进js里了（无论我mode设为什么值）

总结一下我的疑问，网上所言，devDependencies用于开发模式打包，dependencies用于生产模式打包，我并没有看到效果，我只看到无论devDependencies和dependencies设为什么值，只要node_modules文件夹里有相应的包最后都能成功打包，那么devDependencies用于开发模式打包，dependencies用于生产模式打包的意义在哪里，网上所言，究竟是什么意思，我哪里理解错了？

最后还有一个疑问，即使网上说的是真的，devDependencies用于开发模式打包，dependencies用于生产模式打包，那我放在devDependencies里面的webpack模块你生产模式都用不了，你怎么打包？

{
  "name": "vuetest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "jquery": "^3.3.1"
  }
}

Answer 1

package.json中的devDependencies和dependencies主要是用来区分环境的。

比如一个Node项目，在开发环境下，你可以需要前端的一些依赖，webpack、eslint之类的，所以这些我们会丢在devDependencies中。
然后等到项目要上线了，部署到了线上环境，实际上是不需要webpack、eslint这些鬼东西的，只需要代码执行时所依赖的第三方包，类似moment、koa什么的，所以我们放到dependencies里边。

那么这两个究竟有什么区别呢？

当在本地开发时，安装依赖执行npm install，这样会安装所有的依赖。
而在线上环境时，执行npm install --production，这样就会过滤掉devDependencies中的依赖了。 :)

所以感觉你的疑惑好像有一丢丢跑偏了。。

npm install | docs

With the --production flag (or when the NODE_ENV environment variable is set to production), npm will not install modules listed in devDependencies.

Answer 2

package.json是和 npm 相关的，它和 webpack 没有直接联系，webpack打包行为处理依赖的是webpack配置文件。

dependencies 和 devDependencies，最为显著的区别在于：

• 如果你开发的项目作为一个npm包发布在了npm上，然后别人npm install使用了你的包，那么只有
  dependencies 下的模块会作为依赖被下载。
• 如果你身为作者在开发这个项目，那么dependencies和devDependencies 下的模块会作为依赖被下载。

回到npm和webpack的关系，你可以通过package.json的scripts字段来定义相关执行命令。根据你的代码所写build: webpack，你可以执行npm run build，它本质上和命令行执行webpack是一样的。

Answer 3

给人一种一腔热情，方法不当的感觉

别百度了，都是瞎扯。去看官方文档吧。中文版也有。

一言以蔽之，跟package.json根本没关系，mode只不过定义了常用的那些优化：

• 想用常用的生产优化，就写production
• 想用常用的开发优化，就写develop
• 想自己指定或者都不想用，就写none

“常用”与否，全是webpack团队钦定的。

Answer 4

我也有同样的疑惑 ......