Rspack 的开发服务器（Dev Server）有哪些功能？

Rspack 的开发服务器（Dev Server）为开发者提供了强大的本地开发环境，支持热更新、代理、HTTPS 等功能。以下是 Rspack Dev Server 的详细说明：

基本配置

启动开发服务器

javascript
// rspack.config.js
module.exports = {
  mode: 'development',
  devServer: {
    static: {
      directory: path.join(__dirname, 'public')
    },
    compress: true,
    port: 9000
  }
}

命令行启动

bash
# 开发模式启动
npx rspack serve

# 指定配置文件
npx rspack serve --config rspack.config.js

# 指定端口
npx rspack serve --port 8080

核心功能

1. 模块热更新（HMR）

Rspack Dev Server 内置了强大的 HMR 功能：

javascript
module.exports = {
  devServer: {
    hot: true, // 启用 HMR
    liveReload: false // 禁用页面自动刷新
  }
}

2. 静态文件服务

javascript
module.exports = {
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
      publicPath: '/',
      serveIndex: true,
      watch: true
    }
  }
}

3. 代理配置

解决开发环境跨域问题：

javascript
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      '/images': {
        target: 'http://example.com',
        changeOrigin: true
      }
    }
  }
}

4. HTTPS 支持

javascript
module.exports = {
  devServer: {
    https: {
      key: fs.readFileSync('path/to/private.key'),
      cert: fs.readFileSync('path/to/certificate.pem'),
      ca: fs.readFileSync('path/to/ca.pem')
    }
  }
}

高级配置

1. 压缩配置

javascript
module.exports = {
  devServer: {
    compress: true,
    client: {
      overlay: {
        errors: true,
        warnings: false
      }
    }
  }
}

2. 开启 Gzip

javascript
module.exports = {
  devServer: {
    compress: true,
    devMiddleware: {
      stats: 'errors-only'
    }
  }
}

3. 历史 API 回退

javascript
module.exports = {
  devServer: {
    historyApiFallback: {
      index: '/index.html',
      rewrites: [
        { from: /^\/api/, to: '/404.html' }
      ]
    }
  }
}

4. 打开浏览器

javascript
module.exports = {
  devServer: {
    open: true,
    open: {
      app: {
        name: 'google chrome'
      }
    }
  }
}

性能优化

1. 缓存配置

javascript
module.exports = {
  devServer: {
    devMiddleware: {
      index: true,
      writeToDisk: false,
      stats: 'minimal'
    }
  }
}

2. 监听选项

javascript
module.exports = {
  devServer: {
    watchFiles: {
      paths: ['src/**/*.php', 'public/**/*'],
      options: {
        usePolling: false,
        interval: 1000
      }
    }
  }
}

3. 构建延迟

javascript
module.exports = {
  devServer: {
    devMiddleware: {
      index: true,
      writeToDisk: false
    },
    client: {
      logging: 'warn',
      overlay: {
        errors: true,
        warnings: false
      }
    }
  }
}

错误处理

1. 错误覆盖

javascript
module.exports = {
  devServer: {
    client: {
      overlay: {
        errors: true,
        warnings: true
      }
    }
  }
}

2. 错误日志

javascript
module.exports = {
  devServer: {
    devMiddleware: {
      stats: {
        colors: true,
        hash: false,
        version: false,
        timings: true,
        assets: false,
        chunks: false,
        modules: false,
        reasons: false,
        children: false,
        source: false,
        errors: true,
        errorDetails: true,
        warnings: true,
        publicPath: false
      }
    }
  }
}

中间件配置

Rspack Dev Server 支持自定义中间件：

javascript
const express = require('express');
const app = express();

app.get('/some/path', function(req, res) {
  res.json({ custom: 'response' });
});

module.exports = {
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      if (!devServer) {
        throw new Error('devServer is not defined');
      }
      
      devServer.app.get('/some/path', function(req, res) {
        res.json({ custom: 'response' });
      });
      
      return middlewares;
    }
  }
}

WebSocket 配置

javascript
module.exports = {
  devServer: {
    client: {
      webSocketURL: 'auto://0.0.0.0:0/ws'
    },
    webSocketServer: {
      type: 'ws',
      options: {
        host: 'localhost',
        port: 8080
      }
    }
  }
}

最佳实践

1. 环境分离：

   • 开发环境使用 Dev Server
   • 生产环境使用静态文件服务器
   • 配置不同的环境变量

2. 代理配置：

   • 合理配置代理解决跨域
   • 使用环境变量管理代理地址
   • 考虑使用 Mock 服务

3. 性能优化：

   • 启用 HMR 提升开发体验
   • 合理配置监听选项
   • 避免不必要的文件监听

4. 错误处理：

   • 启用错误覆盖快速定位问题
   • 配置合适的日志级别
   • 使用 source maps 调试

5. 安全考虑：

   • 开发环境不要暴露敏感信息
   • 使用 HTTPS 测试安全功能
   • 配置适当的 CORS 策略

Rspack Dev Server 为开发者提供了功能强大、配置灵活的开发环境，通过合理配置可以极大提升开发效率和体验。