開發環境：開發環境是我們程式設計師專門用於開發的伺服器，配置可以比較隨意， 為了開發除錯方便，一般開啟全部錯誤報告。

測試環境：一般是克隆一份生產環境的配置，一個程式在測試環境工作不正常，那麼肯定不能把它釋出到生產機上。

生產環境：是指正式提供對外服務的，一般會關掉錯誤報告，開啟錯誤日誌。

三個環境也可以說是系統開發的三個階段：開發->測試->上線，其中生產環境也就是通常說的真實環境。

開發環境與生產環境分離的原因如下：

在開發時，不可避免會產生大量debug又或是測試的程式碼，這些程式碼不應出現在生產環境中（也即不應提供給使用者）。

在把頁面部署到伺服器時，為了追求極致的技術指標，我們會對程式碼進行各種各樣的優化，比如說混淆、壓縮，這些手段往往會徹底破壞程式碼本身的可讀性，不利於我們進行debug等工作。

資料來源的差異化，比如說在本地開發時，讀取的往往是本地mock(模擬測試資料)出來的資料，而正式上線後讀取的自然是API提供的資料了。

如果硬是要在開發環境和生產環境用完全一樣的程式碼，那麼必然會付出沉重的代價，這點想必也不用多說了。

一般來說，

開發環境：  npm i    --save -dev

生產環境：  npm i    --save

理解就好

─webpack.config.js# 生產環境的webpack配置檔案（無實質內容，僅為組織整理）

dependences是專案正常執行所需要的依賴，而devDependencies則是開發者開發時整個專案所需的依賴（如會有一些測試依賴之類的）。

1、會預設安裝兩種依賴。

如果你只是單純的想使用這個包而不需要進行一些改動測試之類的操作，則執行：（只安裝dependencies而不安裝devDependencies。）

npminstall--production

2、如果想要安裝devDependencies,則執行：

npminstallpackagename--dev

dependencies就是你程式跑起來需要的模組，沒有這個模組你程式就會報錯。

devDependencies見命知意了，開發程式的時候需要的模組了。

舉個例子，你用angularjs框架開發一個程式，開發階段需要用到gulp來構建你的開發和本地執行環境。所以angularjs一定要放到dependencies裡，因為以後程式到生產環境也要用。gulp則是你用來壓縮程式碼，打包等需要的工具，程式實際執行的時候並不需要，所以放到dev裡就ok了。

再深入一些，你寫程式要用ES6標準，瀏覽器並不完全支援，所以你要用到babel來轉換程式碼。程式裡有訊息提示，你想用toaster。同樣一個開發用，一個執行用。所以babel放dev，toaster放dependencies。

希望你理解了！

簡單一些可以：

dependencies存放專案或元件程式碼中依賴到的

devDependencies存放測試程式碼依賴的包或構建工具的包

如果你使用了一些構建工具，比如webpack之類的，打包的時候，是不會把dev庫打進去的。

devDependencies 通常用來放我們開發時所用到的工具，比如 Webpack，Gulp，babel等。devDependencies 裡面的外掛只用於開發環境，不用於生產環境，而 dependencies 是需要釋出到生產環境的。

補充

瀏覽器並不會實際的去同步載入這個模組，require的處理是由Webpack進行解析和打包的，瀏覽器只需要執行打包後的程式碼。

將Webpack開發伺服器整合到已有伺服器

儘管Webpack開發伺服器可以直接用於開發，但實際專案中我們可能必須使用自己的Web伺服器。這就需要我們能將Webpack的服務整合到已有伺服器，來使用Webpack提供的模組打包和載入功能。要實現這一點其實非常容易，只需要在載入打包檔案時指定完整的URL地址，例如：

這就告訴當前頁面應該去另外一個伺服器獲得指令碼資原始檔，在之前我們已經在配置檔案中指定了開發伺服器的地址，因此打包後的檔案也知道應該通過哪個地址去建立Socket IO來動態載入模組。