webpack實現開發測試生產等環境的打包切換

使用webpack構建的工程，在開發過程中不同環境的配置不同，在各種環境的打包切換過程中需要手動修改相關配置達到預期目的。但是每次都手動修改會比較麻煩，本文簡單介紹如何通過對webpack進行配置，實現不同環境打包分類配置；

1.修改build資料夾下build.js檔案

新增宣告變數

修改前

修改後

2.修改config資料夾下prod.env.js檔案

新增不同環境的名稱

修改前

修改後

3.修改不同環境下的請求網域名稱位址（我在專案中新建了src/modules/http.js資料夾放置**）

修改前

打包的時候需要通過修改變數getapiurl等的位址配置來區分不同環境的包

如當前執行npm run build產生的包為測試環境的包，適用於測試人員進行測試。待專案需要上線時需要修改http為https並將test去掉再執行npm run build打包的為生產環境的包，用於專案上線使用，來回的修改比較麻煩。

修改後

這樣就可以將不同環境的介面網域名稱位址進行分類管理，打包的時候只需要執行npm run build pro既可以完成生產環境的打包。

原文：可以通過位址列獲取網域名稱，判斷是測試環境還是生產環境，區分對應環境的位址，然後 main.js 引入掛載vue，就可以通過統一變數進行位址的訪問，上到生產、測試環境都不需要更改位址了自動改；

這樣更改省去了每次單獨打包

webpack實現開發 測試 生產等環境的打包切換