webpack 階段回顧 之 webpack-dev-server

webpack-dev-server是一個讓咱們能夠模擬線上環境進行項目調試的工具

主要功能有：

• 路徑重定向
• 瀏覽器中顯示編譯錯誤
• 接口代理 如解決跨域
• 熱更新

使用步驟

• 安裝webpack-dev-server
• 配置devServer字段
• 利用命令行開啓服務

npm install webpack-dev-server --save   //安裝局部

配置devServer

//在webpack.config.js中添加devServer字段
devServer:{
    port:'',  //端口
    proxy:{ //代理
        '/':{   //表示碰到以 /開頭就觸發代理
            target:'128.23.321.1',  //請求轉發到128.23.321.1
            changeOrigin:true,
            pathRewrite:{
                '^/comments':'/api/comments'    
            },
            headers:{  //要加入的請求頭
                
            }
            
        }
    }
}

devServer經常使用配置

• inline 服務的開啓模式
• port: 代理接口
• historyApiFallback 路徑 重定向
• Hot: 熱更新 （頁面無刷新 更新頁面）
• lazy 懶編譯
• overlay 錯誤遮罩 （默認顯示在控制檯，設置了會顯示在遮罩上 ，這個不多用）
• proxy 代理請求

proxy:{ //代理 能夠寫多個
        '/':{   //表示碰到以 /開頭就觸發代理 
            target:'128.23.321.1',  //請求轉發到128.23.321.1
            changeOrigin:true,
            pathRewrite:{
                '^/comments':'/api/comments' //簡化做用 /cmments/就至關於請求 128.23.321.1/api/comments
            },
            headers:{  //要加入的請求頭
                
            }
        },
        '/apis':{ //以/apis/開頭的才代理轉發
            
        }
    }

proxy請求後， 頁面控制檯請求地址顯示的好比是localhost:8081/smartSpec/detail/12028.htm 但其實已是代理訪問的是128.23.321.1/smartSpec/detail/12028.htm地址。已經解決跨域問題