webpack 配置devServer

webpack 的 devServer 配置是用于开发环境的服务器配置，可以实现自动编译和热更新等功能。以下是一个简单的 devServer 配置示例：

devServer: {
  contentBase: path.join(__dirname, 'public'), // 静态文件目录
  compress: true, // 是否启用 gzip 压缩
  port: 8080, // 端口号
  hot: true, // 是否启用热更新
  open: true, // 是否自动打开浏览器
  proxy: { // 反向代理配置
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

其中，`contentBase` 设置静态文件目录，`compress` 是否启用 gzip 压缩，`port` 设置端口号，`hot` 是否启用热更新，`open` 是否自动打开浏览器，`proxy` 反向代理配置可以实现在开发环境中的跨域请求。

相关问题

webpack 配置devserver

webpack 的 devServer 配置是用于开发环境的服务器配置，可以实现自动编译和热更新等功能。以下是一个简单的 devServer 配置示例：

devServer: {
  contentBase: path.join(__dirname, 'public'), // 静态文件目录
  compress: true, // 是否启用 gzip 压缩
  port: 8080, // 端口号
  hot: true, // 是否启用热更新
  open: true, // 是否自动打开浏览器
  proxy: { // 反向代理配置
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

其中，`contentBase` 设置静态文件目录，`compress` 是否启用 gzip 压缩，`port` 设置端口号，`hot` 是否启用热更新，`open` 是否自动打开浏览器，`proxy` 反向代理配置可以实现在开发环境中的跨域请求。

webpack配置devServer

webpack配置devServer可以用来提高开发效率，它提供了一些配置可以改变devServer的默认行为。除了在配置文件通过devServer传入参数外，还可以通过命令行参数传入。需要注意的是，只有在通过devServer去启动webpack时，配置文件里devServer才会生效，因为这些参数所对应的功能都是devServer提供的，webpack本身并不认识devServer配置项。其中一些常用的配置项包括：
1. devServer.contentBase：配置devServer HTTP服务器的文件根目录。默认情况下为当前执行目录，所以一般不必设置它，除非有额外的文件需要被devServer服务。
2. devServer.open：用于在devServer启动且第一次构建完时，自动用你系统上默认的浏览器去打开要开发的网页，同时还提供devServer.openPage配置项用于打开指定URL的网页。
3. devServer.headers：用于配置HTTP响应头。
4. devServer.hot：用于开启热更新功能。
5. devServer.disableHostCheck：用于禁用webpack-dev-server的host检查功能，可以解决一些host不匹配的问题。