webpack之devserver

webpack之devserver

devserver.host

指定使用一个 host。默认是 localhost。如果你希望服务器外部可访问，指定如下：0.0.0.0

module.exports = {
  //...
  devServer: {
    host: '0.0.0.0' //默认 localhost
  }
}

devserver.port

指定要监听请求的端口号

module.exports = {
  //...
  devServer: {
    port: 8080
  }
}

devserver.https

默认情况下，devserver 通过 HTTP 提供服务。也可以选择带有 HTTPS提供服务

module.exports = {
  //...
  devServer: {
    https: true
  }
}

devserver.compress

一切服务都启用 gzip 压缩

module.exports = {
  //...
  devServer: {
    compress: true
  }
}

devserver.headers

在所有响应中添加首部内容

module.exports = {
  //...
  devServer: {
    headers: {
      'abc': '1234567'
    }
  }
}

devserver.hot

启用 webpack 的 模块热替换 (HMR)功能

module.exports = {
  //...
  devServer: {
    hot: true
  }
}

devServer.clientLogLevel

控制台日志级别 string: 'none' | 'info' | 'error' | 'warning' 默认值 info

module.exports = {
  //...
  devServer: {
    clientLogLevel: 'info'
  }
}

devServer.overlay

当出现编译器错误或警告时，在浏览器中显示全屏覆盖层。默认禁用

module.exports = {
  //...
  devServer: {
    overlay: true
  }
}
​
//或者指定警告、错误的显示
module.exports = {
  //...
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  }
}

devserver.open

告诉 dev-server 在 server 启动后打开浏览器。默认禁用。

module.exports = {
  //...
  devServer: {
    open: true
  }
}

devServer.openPage

指定打开浏览器时的导航页面。

module.exports = {
  //...
  devServer: {
    openPage: '/index.html?ip=test', // 弹出的页面地址
  }
}

devserver.public

指定打开浏览器浏览器页面host

//获取本机IP地址
let getHost = () => {
    const ServerHost = (function getIPAdress() {
        var interfaces = require('os').networkInterfaces()
        for (var devName in interfaces) {
            var iface = interfaces[devName]
            for (var i = 0; i < iface.length; i++) {
                var alias = iface[i]
                if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
                    return alias.address
                }
            }
        }
    })()
    return ServerHost
}

let port = 8080

module.exports = {
  //...
  devServer: {
    public: `${getHost()}:${port}`
  }
}

devserver.porxy

代理后端接口Api

请求 /api/users 会代理到 http://www.centrelink.cn:8081/user , pathRewrite 重新把请求的 /api/users 替换成 /users

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://www.centrelink.cn:8081',
        pathRewrite: {'^/api' : ''},
      }
    }
  }
}

默认情况下，不接受运行在 HTTPS 上，且使用了无效证书的后端服务器需设置 secure : false

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://www.centrelink.cn:8081',
        pathRewrite: {'^/api' : ''},
        secure: false  //target Api服务器使用https协议且证书无效的时候需要设置false
      }
    }
  }
}

改变请求Host

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://www.centrelink.cn:8081',
        pathRewrite: {'^/api' : ''},
        changeOrigin: true, //改变请求头host为https://www.centrelink.cn:8081
        secure: false  //target Api服务器使用https协议且证书无效的时候需要设置false
      }
    }
  }
}

高级玩法

代理多个后端服务器Api

// 代理后端服务器群
let proxy = {
    // 后端人员01
    '/person01': {
        target: 'http://192.168.1.3:9999',
        changeOrigin: true,
        pathRewrite: { '^/cgp': '' },
        secure: false
    },

    // 后端人员02
    '/porson02': {
        target: 'http://192.168.1.4:9999',
        changeOrigin: true,
        pathRewrite: { '^/ls': '' },
        secure: false
    },

    // 公司外网测试环境
    '/test': {
        target: 'https://www.test.cn:7779',
        changeOrigin: true,
        pathRewrite: { '^/test': '' },
        secure: false
    },

    // 线上环境
    '/prd': {
        target: 'https://www.prd.com',
        changeOrigin: true,
        pathRewrite: { '^/prd': '' },
        secure: false
    }
}

module.exports = {
  //...
  devServer: {
    proxy
  }
}


// request.js

import axios from 'axios'
import faceConfig from '../../public/faceConfig'

const baseUrl = faceConfig.basePath

//获取url参数转换对象形式
function parseQuery(str = location.search) {
    let qs = str.indexOf('?') === -1 ? str : str.split('?')[1]
    if (qs.length > 0) {
        let s,
            q = {},
            arr = []
        arr = qs.split('&')
        for (let i = 0; i < arr.length; i++) {
            if (!arr[i]) continue
            s = arr[i].split('=')
            q[s[0]] = s[1]
        }
        return q
    } else {
        return {}
    }
}

const queryObj = parseQuery()

let proxy = queryObj.ip ? `/${queryObj.ip}` : ''

// 创建 axios 实例
const request = axios.create({
    baseURL: `${proxy}/${baseUrl}` // API 请求的默认前缀
    timeout: 30000 // 请求超时时间
})

完整devserver配置

//获取本机IP地址
let getHost = () => {
    const ServerHost = (function getIPAdress() {
        var interfaces = require('os').networkInterfaces()
        for (var devName in interfaces) {
            var iface = interfaces[devName]
            for (var i = 0; i < iface.length; i++) {
                var alias = iface[i]
                if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
                    return alias.address
                }
            }
        }
    })()
    return ServerHost
}

let port = 8080


module.exports = {
  devServer: {
    host: '0.0.0.0', //默认 localhost
    port,
    https: true,
    hot: true,
    compress: true,
    clientLogLevel: 'info',
    overlay: true,
    open: true,
    openPage: '/index.html?ip=test', // 弹出的页面地址
    public: `${getHost()}:${port}`,
    proxy: {
      '/api': {
        target: 'https://www.test.com:8081',
        pathRewrite: {'^/api' : ''},
        changeOrigin: true, //改变请求头host为https://www.centrelink.cn:8081
        secure: false  //target Api服务器使用https协议且证书无效的时候需要设置false
      }
    }
  }
}