webpack-dev-server

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
  }
};