webpack快速入門——實戰技巧：開發和生產並行設置

package.json中，devDependencies和dependencies是不同的

devDependencies：開發依賴

dependencies：生產依賴（線上）

1.安裝生產環境的依賴包：

cnpm install --production

2.配置生產環境和開發環境並行：

我們在以前的配置中設置了一個變量website，用於靜態資源正確找到路徑。那如果生產環境和開發環境不一樣，而且我們需要來回切換，這時候我們需要更好的設置方法。

var website={
    publicPath:"http://172.16.xx.xx:8081/"
}

3.修改package.json，其實就是增加一個dev設置，用來區分是生產環境還是開發環境

"scripts": {
    "server": "webpack-dev-server --open",
    "dev":"set type=dev&webpack",
    "build":"set type=build&webpack"
  }

4.修改webpack.config.js文件

 

if(process.env.type=="build"){
    var website = {
        publicPath: 'https://www.baidu.com:8081/'
    }
}else{
    var website = {
        publicPath: 'http://172.16.xx.xx:8081/'
    }
}

 

 

 

前端必學內容：webpack（模塊打包器）

webpack3 學習內容，點擊即可到達

(1).webpack快速入門——如何安裝webpack及注意事項

(2).webpack快速入門——webpack3.X 快速上手一個Demo   

(3).webpack快速入門——配置文件：入口和出口，多入口、多出口配置 

(4).webpack快速入門——配置文件：服務和熱更新

(5).webpack快速入門——CSS文件打包

(6).webpack快速入門——配置JS壓縮，打包

(7).webpack快速入門——插件配置：HTML文件的發布

(8).webpack快速入門——CSS中的圖片處理

(9).webpack快速入門——CSS分離與圖片路徑處理

(10).webpack快速入門——處理HTML中的圖片

(11).webpack快速入門——CSS進階，Less文件的打包和分離

(12).webpack快速入門——CSS進階：SASS文件的打包和分離

(13).webpack快速入門——CSS進階：自動處理CSS3前綴

(14).webpack快速入門——CSS進階：消除未使用的CSS

(15).webpack快速入門——給webpack增加babel支持

(16).webpack快速入門——打包后如何調試

(17).webpack快速入門——實戰技巧：開發和生產並行設置

(18).webpack快速入門——實戰技巧：webpack模塊化配置

(19).webpack快速入門——實戰技巧：優雅打包第三方類庫

(20).webpack快速入門——實戰技巧：watch的正確使用方法，webpack自動打包

(21).webpack快速入門——實戰技巧：webpack優化黑技能

(22).webpack快速入門——集中拷貝靜態資源

(23).webpack快速入門——Json配置文件使用

 

如果我的內容對你有幫助，歡迎打賞