面试题：Webpack热更新模块配置中devServer的关键参数及作用

contentBase：
- 作用：指定服务器从哪个目录提供文件。这个目录下的文件会被服务器访问，比如我们可以将打包后的 dist 目录设置为 contentBase，这样浏览器就能访问到打包后的资源。
- 示例：devServer: { contentBase: path.join(__dirname, 'dist') }
hot：
- 作用：启用 webpack 的模块热替换（HMR）功能。当应用程序代码发生变化时，HMR 可以在不刷新整个页面的情况下更新部分模块，从而提高开发效率。
- 示例：devServer: { hot: true }
port：
- 作用：指定开发服务器监听的端口号。默认是 8080，如果这个端口被占用，可以通过设置 port 参数来指定其他可用端口。
- 示例：devServer: { port: 8081 }
host：
- 作用：指定开发服务器监听的主机地址。默认是 localhost，如果想让其他设备通过局域网访问该开发服务器，可以设置为 0.0.0.0。
- 示例：devServer: { host: '0.0.0.0' }
proxy：
- 作用：用于设置代理，解决开发环境中的跨域问题。通过代理配置，可以将某些请求转发到另一个服务器，这样在开发时就可以像在同一个域下一样进行请求。
- 示例：

devServer: {
  proxy: {
    '/api': {
      target: 'http://example.com',
      changeOrigin: true
    }
  }
}

这里将以 /api 开头的请求代理到 http://example.com，changeOrigin 设置为 true 表示修改请求头的 origin 字段，以避免跨域问题。

星途面试题库