開(kāi)發(fā)環(huán)境：開(kāi)發(fā)環(huán)境是程序猿們專門用于開(kāi)發(fā)的服務(wù)器，配置可以比較隨意， 為了開(kāi)發(fā)調(diào)試方便，一般打開(kāi)全部錯(cuò)誤報(bào)告。

測(cè)試環(huán)境：一般是克隆一份生產(chǎn)環(huán)境的配置，一個(gè)程序在測(cè)試環(huán)境工作不正常，那么肯定不能把它發(fā)布到生產(chǎn)機(jī)上。

生產(chǎn)環(huán)境：是值正式提供對(duì)外服務(wù)的，一般會(huì)關(guān)掉錯(cuò)誤報(bào)告，打開(kāi)錯(cuò)誤日志。

三個(gè)環(huán)境也可以說(shuō)是系統(tǒng)開(kāi)發(fā)的三個(gè)階段：開(kāi)發(fā)->測(cè)試->上線，其中生產(chǎn)環(huán)境也就是通常說(shuō)的真實(shí)環(huán)境。相關(guān)文章：《項(xiàng)目中的軟硬件開(kāi)發(fā)環(huán)境與工具指的是什么？》

開(kāi)發(fā)環(huán)境與生產(chǎn)環(huán)境分離的原因如下：

在開(kāi)發(fā)時(shí)，不可避免會(huì)產(chǎn)生大量debug又或是測(cè)試的代碼，這些代碼不應(yīng)出現(xiàn)在生產(chǎn)環(huán)境中（也即不應(yīng)提供給用戶）。

在把頁(yè)面部署到服務(wù)器時(shí)，為了追求極致的技術(shù)指標(biāo)，我們會(huì)對(duì)代碼進(jìn)行各種各樣的優(yōu)化，比如說(shuō)混淆、壓縮，這些手段往往會(huì)徹底破壞代碼本身的可讀性，不利于我們進(jìn)行debug等工作。
 

 

數(shù)據(jù)源的差異化，比如說(shuō)在本地開(kāi)發(fā)時(shí)，讀取的往往是本地mock出來(lái)的數(shù)據(jù)，而正式上線后讀取的自然是API提供的數(shù)據(jù)了。

如果硬是要在開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境用完全一樣的代碼，

那么必然會(huì)付出沉重的代價(jià)，這點(diǎn)想必也不用多說(shuō)了。

─webpack.config.js# 生產(chǎn)環(huán)境的webpack配置文件（無(wú)實(shí)質(zhì)內(nèi)容，僅為組織整理）

dependences是項(xiàng)目正常運(yùn)行所需要的依賴，而devDependencies則是開(kāi)發(fā)者開(kāi)發(fā)時(shí)整個(gè)項(xiàng)目所需的依賴（如會(huì)有一些測(cè)試依賴之類的）。

會(huì)默認(rèn)安裝兩種依賴。

如果你只是單純的想使用這個(gè)包而不需要進(jìn)行一些改動(dòng)測(cè)試之類的操作，則運(yùn)行：（只安裝dependencies而不安裝devDependencies。）

npminstall--production

如果想要安裝devDependencies,則運(yùn)行：

npminstallpackagename--dev

dependencies就是你程序跑起來(lái)需要的模塊，沒(méi)有這個(gè)模塊你程序就會(huì)報(bào)錯(cuò)。

devDependencies見(jiàn)命知意了，開(kāi)發(fā)程序的時(shí)候需要的模塊了。

舉個(gè)例子，你用angularjs框架開(kāi)發(fā)一個(gè)程序，開(kāi)發(fā)階段需要用到gulp來(lái)構(gòu)建你的開(kāi)發(fā)和本地運(yùn)行環(huán)境。所以angularjs一定要放到dependencies里，因?yàn)橐院蟪绦虻缴a(chǎn)環(huán)境也要用。gulp則是你用來(lái)壓縮代碼，打包等需要的工具，程序?qū)嶋H運(yùn)行的時(shí)候并不需要，所以放到dev里就ok了。

再深入一些，你寫程序要用ES6標(biāo)準(zhǔn)，瀏覽器并不完全支持，所以你要用到babel來(lái)轉(zhuǎn)換代碼。程序里有消息提示，你想用toaster。同樣一個(gè)開(kāi)發(fā)用，一個(gè)運(yùn)行用。所以babel放dev，toaster放dependencies。

希望你理解了！

簡(jiǎn)單一些可以：

dependencies存放項(xiàng)目或組件代碼中依賴到的

devDependencies存放測(cè)試代碼依賴的包或構(gòu)建工具的包

如果你使用了一些構(gòu)建工具，比如webpack之類的，打包的時(shí)候，是不會(huì)把dev庫(kù)打進(jìn)去的。

devDependencies 通常用來(lái)放我們開(kāi)發(fā)時(shí)所用到的工具，比如 Webpack，Gulp，babel等。devDependencies 里面的插件只用于開(kāi)發(fā)環(huán)境，不用于生產(chǎn)環(huán)境，而 dependencies 是需要發(fā)布到生產(chǎn)環(huán)境的。

瀏覽器并不會(huì)實(shí)際的去同步加載這個(gè)模塊，require的處理是由Webpack進(jìn)行解析和打包的，瀏覽器只需要執(zhí)行打包后的代碼。

將Webpack開(kāi)發(fā)服務(wù)器集成到已有服務(wù)器

盡管Webpack開(kāi)發(fā)服務(wù)器可以直接用于開(kāi)發(fā)，但實(shí)際項(xiàng)目中我們可能必須使用自己的Web服務(wù)器。這就需要我們能將Webpack的服務(wù)集成到已有服務(wù)器，來(lái)使用Webpack提供的模塊打包和加載功能。要實(shí)現(xiàn)這一點(diǎn)其實(shí)非常容易，只需要在載入打包文件時(shí)指定完整的URL地址，例如：

這就告訴當(dāng)前頁(yè)面應(yīng)該去另外一個(gè)服務(wù)器獲得腳本資源文件，在之前我們已經(jīng)在配置文件中指定了開(kāi)發(fā)服務(wù)器的地址，因此打包后的文件也知道應(yīng)該通過(guò)哪個(gè)地址去建立Socket IO來(lái)動(dòng)態(tài)加載模塊。