webpack配置package.json時(shí)devDependencies與dependencies？

最近在學(xué)習(xí)webpack4的過程中，針對(duì)以前從來沒有注意過的細(xì)節(jié)進(jìn)行深究，發(fā)現(xiàn)了一些不是很明白的問題，現(xiàn)在我的package.json配置文件里引用了webpack，webpack-cli，html-webpack-plugin，clean-webpack-plugin，這些都是工具，無需多言，我是打包進(jìn)devDependencies里面的，然后我再開發(fā)index.js的時(shí)候，引入了jquery，我開始想，這個(gè)理論上是應(yīng)該放在dependencies里面的，因?yàn)樯a(chǎn)模式需要，但是如果我放在devDependencies里面會(huì)怎么樣呢？以下是我不停的實(shí)驗(yàn)得出的結(jié)論(每一次實(shí)驗(yàn)，為確保準(zhǔn)確，都徹底刪除node_modules文件夾，重新一個(gè)一個(gè)安裝)：
1.放在devDependencies里，mode設(shè)置為development（開發(fā)模式），打包出的文件可以正常使用jquery；
2.放在devDependencies里，mode設(shè)置為production（生產(chǎn)模式），打包出的文件可以正常使用jquery；
3.放在dependencies里，mode設(shè)置為development（開發(fā)模式），打包出的文件可以正常使用jquery；
4.放在dependencies里，mode設(shè)置為production（生產(chǎn)模式），打包出的文件可以正常使用jquery；

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

what？
我開始懷疑人生了，我開始不明白dependencies和devDependencies到底是用來干嘛的了，因?yàn)槲铱床坏揭稽c(diǎn)點(diǎn)區(qū)別，我不明白它存在的意義是什么了，還有與之對(duì)應(yīng)的生產(chǎn)模式和開發(fā)模式又是什么？求大神不吝賜教，萬分感謝！