What features does Rspack's Dev Server have?

Rspack's Dev Server provides developers with a powerful local development environment, supporting hot reloading, proxying, HTTPS, and more. Here's a detailed explanation of Rspack Dev Server:

Basic Configuration

Starting the Dev Server

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

Command Line Start

bash
# Start in development mode
npx rspack serve

# Specify configuration file
npx rspack serve --config rspack.config.js

# Specify port
npx rspack serve --port 8080

Core Features

1. Hot Module Replacement (HMR)

Rspack Dev Server has powerful built-in HMR functionality:

javascript
module.exports = {
  devServer: {
    hot: true, // Enable HMR
    liveReload: false // Disable automatic page reload
  }
}

2. Static File Serving

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

3. Proxy Configuration

Solve cross-origin issues in development:

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

4. HTTPS Support

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')
    }
  }
}

Advanced Configuration

1. Compression Configuration

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

2. Enable Gzip

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

3. History API Fallback

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

4. Open Browser

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

Performance Optimization

1. Cache Configuration

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

2. Watch Options

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

3. Build Delay

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

Error Handling

1. Error Overlay

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

2. Error Logging

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

Middleware Configuration

Rspack Dev Server supports custom middleware:

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 Configuration

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

Best Practices

1. Environment Separation:

   • Use Dev Server in development environment
   • Use static file server in production
   • Configure different environment variables

2. Proxy Configuration:

   • Reasonably configure proxies to solve cross-origin issues
   • Use environment variables to manage proxy addresses
   • Consider using Mock services

3. Performance Optimization:

   • Enable HMR to improve development experience
   • Reasonably configure watch options
   • Avoid unnecessary file watching

4. Error Handling:

   • Enable error overlay for quick problem identification
   • Configure appropriate log levels
   • Use source maps for debugging

5. Security Considerations:

   • Don't expose sensitive information in development
   • Use HTTPS to test security features
   • Configure appropriate CORS policies

Rspack Dev Server provides developers with a powerful and flexible development environment. Through reasonable configuration, it can greatly improve development efficiency and experience.