webpack中兩種開發模式development 和 production 的區分打包
當我們在開發一個項目的時候，一般用development這個環境進行項目的開發，在這個打包環境下，webpack我們使用了devserve，可以幫我們起一個服務器，這個服務器裏面還集成了一些HTML這樣的特性，只要更改了代碼，會幫我們重新打包，然後代碼的內容會實時的展示在服務器對應的網頁上。所以在開發環境下使用development這種方式非常的方便。但是當我們的源代碼開發完成了，我們需要把代碼打包上線，這個時候就需要用production這種模式。這兩種模式的差異主要在什麼方面呢？
1.sourcemap： 在開發環境中，sourcemap是非常全的，這樣的話可以幫我們在開發環境下快速的定位代碼的問題，但在production環境下代碼要上線了，sourcemap不是那麼重要了，所以在線上環境下，sourcemap會更加簡潔一些，或者再線上環境sourcemap會生成一個.map文件進行存儲。
2.壓縮： 在開發環境中，打包生成的代碼是不需要壓縮的，可以比較具體的看到一些說明項，但是線上模式下代碼一般是壓縮的
如上，開發環境和線上環境的webpack配置是不同的，在打包的時候根據需要進行打包，在webpack.donfig.js來回進行需改配置顯然是不方便的，我們可以給兩種模式單獨配置文件
首先給webpack.config.js重命名，改爲webpack.dev.js,表示開發環境下的配置文件，我們再在跟目錄下配置一個webpack.prod.js,表示一旦打包線上代碼的時候，使用的是prod.js這個文件，將dev裏面的配置內容copy到prod文件中，修改mode爲production， devtool改爲cheap-module-source-map,devServer沒有必要存在,因爲打包生成線上代碼的時候，只需要將生成的文件上傳到服務器即可。不要生成一個服務器啓動一個服務器了。HotModuleReplacePlugin、optimization 也沒有必要了。
打開package.json文件。在scripts中修改：
"scripts": {
“dev”：“webp