8. webpack-dev-server

webpack-dev-server — это встроенный HTTP-сервер для разработки, который предоставляет живую перезагрузку (live reload) и Hot Module Replacement (HMR). С HMR изменения в коде применяются мгновенно без полной перезагрузки страницы — сохраняется состояние приложения.

Установка

npm install --save-dev webpack-dev-server

В package.json:

{
  "scripts": {
    "start": "webpack serve",
    "start:host": "webpack serve --host 0.0.0.0"
  }
}

Конфигурация devServer

module.exports = {
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'), // Статические файлы
    },
    port: 3000,              // Порт (по умолчанию: 8080)
    host: 'localhost',       // Хост
    open: true,              // Открыть браузер автоматически
    hot: true,               // Hot Module Replacement
    compress: true,          // Gzip сжатие
    historyApiFallback: true, // Для React Router (SPA)
    https: false,            // HTTPS
  },
};

Hot Module Replacement (HMR)

HMR позволяет обновлять модули во время работы приложения без полной перезагрузки:

// Для CSS — работает автоматически
// Для JS — нужна явная обработка (React Fast Refresh делает это автоматически)

// Ручная обработка HMR обновлений:
if (module.hot) {
  module.hot.accept('./App', () => {
    const NextApp = require('./App').default;
    ReactDOM.render(<NextApp />, document.getElementById('root'));
  });
}

С React 17+ рекомендуется использовать @pmmmwh/react-refresh-webpack-plugin:

npm install --save-dev @pmmmwh/react-refresh-webpack-plugin react-refresh

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  plugins: [
    isDevelopment && new ReactRefreshWebpackPlugin(),
  ].filter(Boolean),
  module: {
    rules: [{
      test: /\\.jsx?$/,
      use: {
        loader: 'babel-loader',
        options: {
          plugins: [isDevelopment && 'react-refresh/babel'].filter(Boolean),
        },
      },
    }],
  },
};

Proxy — проброс API запросов

Главная проблема разработки — CORS при обращении к backend API. Proxy решает её:

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',  // Адрес backend
      pathRewrite: { '^/api': '' },     // Убрать /api из пути
      changeOrigin: true,               // Изменить Origin заголовок
      secure: false,                    // Для HTTPS с самоподписанным сертификатом
    },
    '/auth': {
      target: 'https://auth.example.com',
      changeOrigin: true,
    },
    '/ws': {
      target: 'ws://localhost:8080',
      ws: true, // WebSocket поддержка
    },
  },
}

После настройки:

// Вместо 'http://localhost:8080/users':
fetch('/api/users'); // → проксируется на http://localhost:8080/users

historyApiFallback — поддержка React Router

Без этой опции прямой переход на /dashboard вернёт 404:

devServer: {
  historyApiFallback: true, // Все 404 → index.html

  // Расширенная конфигурация:
  historyApiFallback: {
    rewrites: [
      { from: /^\\/api/, to: '/api.html' },
      { from: /^\/admin/, to: '/admin.html' },
      { from: /./, to: '/index.html' },
    ],
  },
}

devMiddleware — настройка webpack middleware

devServer: {
  devMiddleware: {
    publicPath: '/assets/',
    writeToDisk: true, // Писать файлы на диск (для SSR)
    stats: 'errors-warnings', // 'verbose' | 'normal' | 'minimal' | 'errors-only'
  },
}

Среды разработки и production

const isDev = process.env.NODE_ENV === 'development';

module.exports = {
  devServer: isDev ? {
    port: 3000,
    hot: true,
    proxy: { '/api': 'http://localhost:8080' },
  } : undefined,
};

HTTPS и SSL

devServer: {
  https: true, // Самоподписанный сертификат

  // Или кастомный сертификат:
  https: {
    key: fs.readFileSync('path/to/key.pem'),
    cert: fs.readFileSync('path/to/cert.pem'),
  },
  server: 'https', // или 'spdy' для HTTP/2
}

Ниже — интерактивный конфигуратор devServer. Настройте параметры и получите готовый конфиг.