1. open 服务启动后，打开浏览器

devServer {    open: true, // 或者    // open:  'Google Chrome',  //  ''Chrome' is 'Google Chrome' on macOS, 'google-chrome' on Linux and 'chrome' on Windows.

2. openPage 服务启动后， 默认打开指定的页面

devServer {    openPage:  '/different/page',}

3. overlay 编译错误后，错误信息全屏覆盖页面

// 只有错误信息devServer {    overlay: true,}// 错误信息和警告信息devServer {    overlay : {        warnings: true,        errors: true,     }}

4. port 监听的端口

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

5. proxy 服务器代理

1）纯路由

module.exports = {    // ...    devServer: {        proxy: {            '/api': 'http://localhost:3000'           // /api/users的请求会被代理到http://localhost:3000/api/users        }    }}

2）想修改路由

module.exports = {  //...  devServer: {    proxy: {      '/api': {        target: 'http://localhost:3000',        pathRewrite: {
    '^/api' : ''}       // /api/users将被代理成http://localhost:3000/users      }    }  }};

3)默认情况下，后端运行在https服务器上但是证书无效时，请求不予接收，如果想接收，设置如下

module.exports = {  //...  devServer: {    proxy: {      '/api': {        target: 'https://other-server.example.com',        secure: false      }    }  }};

4) 自己决定需要代理哪些内容：bypass

 !  返回null或者undefined,正常代理

 !! 返回false,产生一个404错误

 !!!返回一个路由

module.exports = {  //...  devServer: {    proxy: {      // 实现当/api请求是浏览器请求时，需要加载一个页面；当是api请求时，      // 还是走代理；函数默认返回undefine,所以if之外的情况都走代理      '/api': {        target: 'http://localhost:3000',        bypass: function(req, res, proxyOptions) {          if (req.headers.accept.indexOf('html') !== -1) {            console.log('Skipping proxy for browser request.');            return '/index.html';          }        }      }    }  }};

5）代理多个指定路由到同一个target: context

module.exports = {  //...  devServer: {    proxy: [{ // 注意，最外层变成了数组      context: ['/auth', '/api'], // 使用context      target: 'http://localhost:3000',    }]  }};

6)代理根文件

module.exports = {  //...  devServer: {    index: '', // specify to enable root proxying    host: '...',    contentBase: '...',    proxy: {      context: () => true,      target: 'http://localhost:1234'    }  }};

7)解决跨域问题：changeOrigin

module.exports = {  //...  devServer: {    proxy: {      '/api': {        target: 'http://localhost:3000',        changeOrigin: true      }    }  }};

6. 热更新：hot 

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

7. 访问打包后的文件：publicPath

module.exports = {  //...  devServer: {    publicPath: '/assets/', // 也可以'http://localhost:8080/assets/或者'/'  }   //  表明可以访问打包后的文件http://localhost:8080/assets/bundle.js};

⚠️： 建议和output.publicPath使用同样的路径

8.加载静态资源：contentBase，优先级比publicPath低

module.exports = {  //...  devServer: {    contentBase: path.join(__dirname, 'public')  }};// 如果多个module.exports = {  //...  devServer: {    contentBase: [path.join(__dirname, 'public'), path.join(__dirname, 'assets')]  }};

⚠️：最好是绝对路径

9.使用本地IP打开

module.exports = {  //...  devServer: {    useLocalIp: true  }};