Webpack 中如何配置 DevServer？

推荐答案

在 Webpack 中配置 DevServer 可以通过 webpack.config.js 文件中的 devServer 选项来实现。以下是一个基本的配置示例：

// www.javascriptcn.com code example
const path = require('path');

module.exports = {
  // 其他配置项...
  devServer: {
    contentBase: path.join(__dirname, 'dist'), // 指定静态文件目录
    compress: true, // 启用 gzip 压缩
    port: 9000, // 指定端口号
    hot: true, // 启用热模块替换
    open: true, // 自动打开浏览器
    proxy: {
      '/api': 'http://localhost:3000', // 配置代理
    },
  },
};

本题详细解读

1. contentBase

contentBase 用于指定 DevServer 提供静态文件服务的根目录。通常设置为打包输出的目录（如 dist），这样 DevServer 可以直接从该目录提供静态文件。

2. compress

compress 选项启用 gzip 压缩，可以减少传输的文件大小，提升加载速度。

3. port

port 指定 DevServer 监听的端口号。默认情况下，DevServer 会使用 8080 端口，但可以通过此选项自定义端口。

4. hot

hot 选项启用热模块替换（Hot Module Replacement, HMR），允许在不刷新整个页面的情况下更新模块。这对于开发过程中快速查看更改非常有用。

5. open

open 选项设置为 true 时，DevServer 启动后会自动打开默认浏览器并访问指定的 URL。

6. proxy

proxy 选项用于配置代理服务器。在开发过程中，可能需要将某些请求代理到后端服务器，以避免跨域问题。例如，将 /api 路径的请求代理到 http://localhost:3000。

7. 其他常用选项

• historyApiFallback: 当使用 HTML5 History API 时，设置为 true 可以让所有路径都返回 index.html，适用于单页应用。
• overlay: 设置为 true 时，可以在浏览器中显示编译错误和警告。
• quiet: 设置为 true 时，DevServer 不会输出任何日志信息。

通过合理配置 devServer 选项，可以极大地提升开发体验。