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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_8009