webpack环境 -- webpack-dev-server 远程代理

webpack-dev-server

安装 npm install webpack-dev-server –save-dev

    参数:
    inline: true, // 默认为true,  false时页面顶端有一个状态条, 显示的是页面的打包状态
    contentBase: //提供内容的路径,false为当前目标
    port:  // 监听的端口号
    historyApiFallback:  // 当遇到找不到的页面时(404),进行的操作
    https:  // 指定https, 可生成对应的证书
    proxy:  // 代理远程接口
    hot: true, //模块热更新
    openpage: 最先打开的页面
    lazy: //启动的时候不打包, 访问到了再编译打包
    overlay: // 在打开的页面中,出现错误就显示遮罩,并显示错误

在package.json 中配置 可直接启动webpack run server

"scripts":{
    "server":"webpack-dev-server --open"
}

在webpack.config.js中配置devServer

proxy : http-proxy-middleware

devServer:{
    inline: true, 
    contentBase: 
    port: 8080, 
    historyApiFallback:{ // 为true时,不管什么路由都重定向到初始页
        rewrites:[
        {from:'/pages/a', to:'/pages/a.html'}
        ]
    }
    https: false
    // 远程代理
    proxy: {  // 例如请求地址为 http:www.baixiang.com/api/common/page   /api/common/page为axios中的地址
        '/':{
            target: 'http:www.baixiang.com',            指定代理的域名
            changeOrigin: true,                         改变源到url
            logLevel: debug,                            控制台/ 命令行显示调试信息
            pathRewrite: {                              重定向一个接口请求,将长地址变短地址
                '^/page':'/api/common/page'             这时/page为axios中的地址
            }      
            headers:{timestamp: new Date().getTime()}           请求头
        }
    }
    hot: true, //模块热更新
    openpage: 最先打开的页面
    lazy: //启动的时候不打包, 访问到了再编译打包
    overlay: // 在打开的页面中,出现错误就显示遮罩,并显示错误
}