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