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地址。已经解决跨域问题

来源：oschina

链接：https://my.oschina.net/u/560237/blog/3178367

标签

Webpack

代理模式

webpack 阶段回顾 之 webpack-dev-server

webpack 阶段回顾之 webpack-dev-server