DevServer

webpack-dev-server можно использовать для быстрого разработки приложения. Обратитесь к руководству по разработке, чтобы начать работу.

Эта страница описывает параметры, влияющие на поведение webpack-dev-server (сокращенно: dev-server) версия >= 5.0.0. Руководство по миграции с v4 на v5 можно найти здесь.

devServer

object

Этот набор параметров используется webpack-dev-server и может быть использован для изменения его поведения различными способами. Вот пример, который сжимает и предоставляет всё из нашего каталога public/ в корне проекта:

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
  },
};

При запуске сервера будет сообщение перед списком разрешенных модулей:

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:9000/
<i> [webpack-dev-server] On Your Network (IPv4): http://197.158.164.104:9000/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:9000/
<i> [webpack-dev-server] Content not from webpack is served from '/path/to/public' directory

которое предоставит информацию о местоположении сервера и том, что он предоставляет.

Если вы используете dev-server через API Node.js, параметры в devServer будут проигнорированы. Передайте параметры в качестве первого параметра вместо этого: new WebpackDevServer({...}, compiler). См. пример использования webpack-dev-server через API Node.js.

Использование через командную строку

Вы можете вызвать webpack-dev-server через командную строку, используя:

npx webpack serve

Список опций командной строки для serve доступен здесь.

Использование через API

Хотя рекомендуется запускать webpack-dev-server через командную строку, вы также можете запустить сервер через API.

См. соответствующую документацию API для webpack-dev-server.

devServer.app

function

Позволяет использовать пользовательские приложения сервера, такие как connect, fastify, и т. д. По умолчанию используется приложение express.

webpack.config.js

const connect = require('connect');

module.exports = {
  //...
  devServer: {
    app: () => connect(),
  },
};

devServer.allowedHosts

'auto' | 'all' [string]

Этот параметр позволяет вам разрешать услуги, которым разрешен доступ к dev-серверу.

webpack.config.js

module.exports = {
  //...
  devServer: {
    allowedHosts: [
      'host.com',
      'subdomain.host.com',
      'subdomain2.host.com',
      'host2.com',
    ],
  },
};

Эмулируя Django's ALLOWED_HOSTS, значение, начинающееся с ., может быть использовано как поддоменный псевдоним. .host.com будет соответствовать host.com, www.host.com, и любому другому поддомену host.com.

webpack.config.js

module.exports = {
  //...
  devServer: {
    // this achieves the same effect as the first example
    // with the bonus of not having to update your config
    // if new subdomains need to access the dev server
    allowedHosts: ['.host.com', 'host2.com'],
  },
};

Использование через командную строку:

npx webpack serve --allowed-hosts .host.com --allowed-hosts host2.com

При установке на 'all' этот параметр игнорирует проверку хоста. ЭТО НЕ РЕКОМЕНДУЕТСЯ, так как приложения, которые не проверяют хост, уязвимы для атак DNS-перенаправления.

webpack.config.js

module.exports = {
  //...
  devServer: {
    allowedHosts: 'all',
  },
};

Использование через командную строку:

npx webpack serve --allowed-hosts all

При установке на 'auto' этот параметр всегда разрешает localhost, host и client.webSocketURL.hostname:

webpack.config.js

module.exports = {
  //...
  devServer: {
    allowedHosts: 'auto',
  },
};

Использование через командную строку:

npx webpack serve --allowed-hosts auto

devServer.bonjour

boolean = false object

Этот параметр транслирует сервер через сеть ZeroConf при запуске.

webpack.config.js

module.exports = {
  //...
  devServer: {
    bonjour: true,
  },
};

Использование через командную строку:

npx webpack serve --bonjour

Чтобы отключить:

npx webpack serve --no-bonjour

Вы также можете передать пользовательские параметры для bonjour, например:

webpack.config.js

module.exports = {
  //...
  devServer: {
    bonjour: {
      type: 'http',
      protocol: 'udp',
    },
  },
};

devServer.client

logging

'log' | 'info' | 'warn' | 'error' | 'none' | 'verbose'

Позволяет задать уровень ведения журнала в браузере, например, перед перезагрузкой, перед ошибкой или когда горячая замена модулей включена.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      logging: 'info',
    },
  },
};

Использование через командную строку:

npx webpack serve --client-logging info

overlay

boolean = true object

Отображает полноэкранный оверлей в браузере при наличии ошибок или предупреждений компилятора.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      overlay: true,
    },
  },
};

Использование через командную строку:

npx webpack serve --client-overlay

Чтобы отключить:

npx webpack serve --no-client-overlay

Вы можете предоставить объект со следующими свойствами для более точного управления:

Свойство	Описание
errors	ошибки компиляции
runtimeErrors	необработанные ошибки выполнения
warnings	предупреждения компиляции

Все свойства необязательны и по умолчанию равны true при отсутствии.

Например, чтобы отключить предупреждения о компиляции, вы можете настроить следующее:

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      overlay: {
        errors: true,
        warnings: false,
        runtimeErrors: true,
      },
    },
  },
};

Использование через командную строку:

npx webpack serve --client-overlay-errors --no-client-overlay-warnings --client-overlay-runtime-errors

Чтобы отфильтровать на основе возникшей ошибки, вы можете передать функцию, принимающую параметр error и возвращающую boolean.

Например, чтобы проигнорировать ошибки, сгенерированные AbortController.abort():

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      overlay: {
        runtimeErrors: (error) => {
          if (error instanceof DOMException && error.name === 'AbortError') {
            return false;
          }
          return true;
        },
      },
    },
  },
};

progress

boolean

Выводит прогресс компиляции в процентах в браузере.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      progress: true,
    },
  },
};

Использование через командную строку:

npx webpack serve --client-progress

Чтобы отключить:

npx webpack serve --no-client-progress

reconnect

boolean = true number

v4.4.0+

Указывает dev-серверу, сколько раз он должен пытаться возобновить соединение с клиентом. Когда true он будет пытаться возобновить соединение неограниченное количество раз.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      reconnect: true,
    },
  },
};

Использование через командную строку:

npx webpack serve --client-reconnect

При установке на false он не будет пытаться возобновить соединение.

module.exports = {
  //...
  devServer: {
    client: {
      reconnect: false,
    },
  },
};

Использование через командную строку:

npx webpack serve --no-client-reconnect

Вы также можете указать точное количество попыток возобновления соединения клиентом.

module.exports = {
  //...
  devServer: {
    client: {
      reconnect: 5,
    },
  },
};

Использование через командную строку:

npx webpack serve --client-reconnect 5

webSocketTransport

'ws' | 'sockjs' string

Этот параметр позволяет либо выбрать текущий режим транспорта devServer для отдельных клиентов, либо предоставить собственную реализацию клиента. Это позволяет указать, как браузер или другой клиент взаимодействует с devServer.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketTransport: 'ws',
    },
    webSocketServer: 'ws',
  },
};

Использование через командную строку:

npx webpack serve --client-web-socket-transport ws --web-socket-server-type ws

Для создания собственной реализации клиента создайте класс, расширяющий BaseClient.

Использование пути к CustomClient.js, реализации пользовательского WebSocket-клиента, наряду с совместимым 'ws' сервером:

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketTransport: require.resolve('./CustomClient'),
    },
    webSocketServer: 'ws',
  },
};

Использование собственных, совместимых реализаций WebSocket-клиента и сервера:

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketTransport: require.resolve('./CustomClient'),
    },
    webSocketServer: require.resolve('./CustomServer'),
  },
};

webSocketURL

string object

Этот параметр позволяет указать URL веб-сокет-сервера (полезно при проксировании dev-сервера, когда скрипт клиента не всегда знает, куда подключиться).

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketURL: 'ws://0.0.0.0:8080/ws',
    },
  },
};

Использование через командную строку:

npx webpack serve --client-web-socket-url ws://0.0.0.0:8080/ws

Вы также можете указать объект со следующими свойствами:

• hostname: Указывает клиентам, подключенным к devServer, использовать указанный хост.
• pathname: Указывает клиентам, подключенным к devServer, использовать указанный путь для подключения.
• password: Указывает клиентам, подключенным к devServer, использовать предоставленный пароль для аутентификации.
• port: Указывает клиентам, подключенным к devServer, использовать указанный порт.
• protocol: Указывает клиентам, подключенным к devServer, использовать указанный протокол.
• username: Указывает клиентам, подключенным к devServer, использовать предоставленное имя пользователя для аутентификации.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketURL: {
        hostname: '0.0.0.0',
        pathname: '/ws',
        password: 'dev-server',
        port: 8080,
        protocol: 'ws',
        username: 'webpack',
      },
    },
  },
};

devServer.compress

boolean = true

Включить сжатие gzip для всего предоставляемого:

webpack.config.js

module.exports = {
  //...
  devServer: {
    compress: true,
  },
};

Использование через командную строку:

npx webpack serve --compress

Чтобы отключить:

npx webpack serve --no-compress

devServer.devMiddleware

object

Предоставьте параметры для webpack-dev-middleware, который обрабатывает webpack-активы.

webpack.config.js

module.exports = {
  devServer: {
    devMiddleware: {
      index: true,
      mimeTypes: { phtml: 'text/html' },
      publicPath: '/publicPathForDevServe',
      serverSideRender: true,
      writeToDisk: true,
    },
  },
};

devServer.headers

array function object

Добавляет заголовки ко всем ответам:

webpack.config.js

module.exports = {
  //...
  devServer: {
    headers: {
      'X-Custom-Foo': 'bar',
    },
  },
};

Вы также можете передать массив:

webpack.config.js

module.exports = {
  //...
  devServer: {
    headers: [
      {
        key: 'X-Custom',
        value: 'foo',
      },
      {
        key: 'Y-Custom',
        value: 'bar',
      },
    ],
  },
};

Вы также можете передать функцию:

module.exports = {
  //...
  devServer: {
    headers: () => {
      return { 'X-Bar': ['key1=value1', 'key2=value2'] };
    },
  },
};

devServer.historyApiFallback

boolean = false object

При использовании API истории HTML5, страница index.html , скорее всего, должна быть отображена вместо любых 404 ответов. Включите devServer.historyApiFallback , установив его в значение true:

webpack.config.js

module.exports = {
  //...
  devServer: {
    historyApiFallback: true,
  },
};

Использование через командную строку:

npx webpack serve --history-api-fallback

Чтобы отключить:

npx webpack serve --no-history-api-fallback

Указав объект, это поведение можно дополнительно контролировать с помощью параметров, таких как rewrites:

webpack.config.js

module.exports = {
  //...
  devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /^\/$/, to: '/views/landing.html' },
        { from: /^\/subpage/, to: '/views/subpage.html' },
        { from: /./, to: '/views/404.html' },
      ],
    },
  },
};

При использовании точек в пути (распространённо в Angular), возможно, потребуется использовать disableDotRule:

webpack.config.js

module.exports = {
  //...
  devServer: {
    historyApiFallback: {
      disableDotRule: true,
    },
  },
};

Для получения дополнительных параметров и информации, см. документацию connect-history-api-fallback.

devServer.host

'local-ip' | 'local-ipv4' | 'local-ipv6' string

Укажите хост для использования. Если вы хотите, чтобы к вашему серверу можно было получить доступ извне, укажите его так:

webpack.config.js

module.exports = {
  //...
  devServer: {
    host: '0.0.0.0',
  },
};

Использование через командную строку:

npx webpack serve --host 0.0.0.0

Это также работает с IPv6:

npx webpack serve --host ::

local-ip

Указание local-ip в качестве хоста попытается разрешить параметр хоста как ваш локальный IPv4 адрес, если доступен, если IPv4 не доступен, он попытается разрешить ваш локальный IPv6 адрес.

npx webpack serve --host local-ip

local-ipv4

Указание local-ipv4 в качестве хоста попытается разрешить параметр хоста как ваш локальный IPv4 адрес.

npx webpack serve --host local-ipv4

local-ipv6

Указание local-ipv6 в качестве хоста попытается разрешить параметр хоста как ваш локальный IPv6 адрес.

npx webpack serve --host local-ipv6

devServer.hot

'only' boolean = true

Включить функцию webpack's горячей замены модулей:

webpack.config.js

module.exports = {
  //...
  devServer: {
    hot: true,
  },
};

Использование через командную строку:

npx webpack serve --hot

Чтобы отключить:

npx webpack serve --no-hot

Чтобы включить горячую замену модулей без обновления страницы в качестве резервного варианта в случае сбоев сборки, используйте hot: 'only':

webpack.config.js

module.exports = {
  //...
  devServer: {
    hot: 'only',
  },
};

Использование через командную строку:

npx webpack serve --hot only

devServer.ipc

true string

Сокет Unix для прослушивания (вместо host).

Установка в true будет прослушивать сокет в /your-os-temp-dir/webpack-dev-server.sock:

webpack.config.js

module.exports = {
  //...
  devServer: {
    ipc: true,
  },
};

Использование через командную строку:

npx webpack serve --ipc

Вы также можете прослушивать другой сокет с помощью:

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    ipc: path.join(__dirname, 'my-socket.sock'),
  },
};

devServer.liveReload

boolean = true

По умолчанию dev-сервер будет перезагружать/обновлять страницу при обнаружении изменений файлов. Параметр devServer.hot должен быть отключен или параметр devServer.watchFiles должен быть включен, чтобы liveReload вступил в силу. Отключите devServer.liveReload , установив его в false:

webpack.config.js

module.exports = {
  //...
  devServer: {
    liveReload: false,
  },
};

Использование через командную строку:

npx webpack serve --live-reload

Чтобы отключить:

npx webpack serve --no-live-reload

devserver.onListening

function (devServer)

Предоставляет возможность выполнения пользовательской функции при запуске webpack-dev-server для прослушивания подключений на порту.

webpack.config.js

module.exports = {
  //...
  devServer: {
    onListening: function (devServer) {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }

      const port = devServer.server.address().port;
      console.log('Listening on port:', port);
    },
  },
};

devServer.open

boolean string object [string, object]

Указывает dev-серверу открыть браузер после запуска сервера. Установите его в true для открытия вашего браузера по умолчанию.

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: true,
  },
};

Использование через командную строку:

npx webpack serve --open

Чтобы отключить:

npx webpack serve --no-open

Чтобы открыть указанную страницу в браузере:

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: ['/my-page'],
  },
};

Использование через командную строку:

npx webpack serve --open /my-page

Чтобы открыть несколько указанных страниц в браузере:

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: ['/my-page', '/another-page'],
  },
};

Использование через командную строку:

npx webpack serve --open /my-page --open /another-page

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

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: {
      app: {
        name: 'google-chrome',
      },
    },
  },
};

Использование через командную строку:

npx webpack serve --open-app-name 'google-chrome'

Объект принимает все параметры из open:

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: {
      target: ['first.html', 'http://localhost:8080/second.html'],
      app: {
        name: 'google-chrome',
        arguments: ['--incognito', '--new-window'],
      },
    },
  },
};

devServer.port

'auto' string number

Укажите номер порта для прослушивания запросов:

webpack.config.js

module.exports = {
  //...
  devServer: {
    port: 8080,
  },
};

Использование через командную строку:

npx webpack serve --port 8080

Параметр port не может быть null или пустой строкой, чтобы автоматически использовать свободный порт, используйте port: 'auto':

webpack.config.js

module.exports = {
  //...
  devServer: {
    port: 'auto',
  },
};

Использование через командную строку:

npx webpack serve --port auto

devServer.proxy

[object, function]

Проксирование некоторых URL-адресов может быть полезно, когда у вас есть отдельный сервер разработки API-бекенда, и вы хотите отправлять запросы API на тот же домен.

Dev-сервер использует мощный пакет http-proxy-middleware. Посмотрите его документацию для более продвинутого использования. Обратите внимание, что некоторые функции http-proxy-middleware не требуют ключа target, например, его функция router, но вам все равно нужно включить ключ target в своей конфигурации здесь, иначе webpack-dev-server не передаст его в http-proxy-middleware.

С бэкендом на localhost:3000, вы можете использовать это для включения проксирования:

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/api'],
        target: 'http://localhost:3000',
      },
    ],
  },
};

Запрос к /api/users теперь будет проксировать запрос к http://localhost:3000/api/users.

Если вы не хотите, чтобы /api передавался, нам нужно переписать путь:

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/api'],
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' },
      },
    ],
  },
};

Сервер бэкенда, работающий по протоколу HTTPS с недействительным сертификатом, по умолчанию не будет принят. Если вы хотите, измените свою конфигурацию следующим образом:

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/api'],
        target: 'http://localhost:3000',
        secure: false,
      },
    ],
  },
};

Иногда вы не хотите проксировать все. Можно обойти прокси на основе возвращаемого значения функции.

В функции у вас есть доступ к запросу, ответу и параметрам прокси.

• Возврат null или undefined для продолжения обработки запроса с прокси.
• Возврат false для создания ошибки 404 для запроса.
• Возврат пути для обслуживания, вместо продолжения проксирования запроса.

Например, для запроса браузера вы хотите обслужить HTML-страницу, а для запроса API — проксировать его. Вы могли бы сделать что-то вроде этого:

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/api'],
        target: 'http://localhost:3000',
        bypass: function (req, res, proxyOptions) {
          if (req.headers.accept.indexOf('html') !== -1) {
            console.log('Skipping proxy for browser request.');
            return '/index.html';
          }
        },
      },
    ],
  },
};

Если вы хотите проксировать несколько определенных путей на один и тот же целевой сервер, вы можете использовать массив из одного или нескольких объектов со свойством context:

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/auth', '/api'],
        target: 'http://localhost:3000',
      },
    ],
  },
};

Обратите внимание, что запросы к корню по умолчанию не будут проксироваться. Чтобы включить проксирование корня, параметр devMiddleware.index должен быть указан как ложное значение:

webpack.config.js

module.exports = {
  //...
  devServer: {
    devMiddleware: {
      index: false, // specify to enable root proxying
    },
    proxy: [
      {
        context: () => true,
        target: 'http://localhost:1234',
      },
    ],
  },
};

Происхождение заголовка хоста сохраняется при проксировании по умолчанию, вы можете установить changeOrigin в true для переопределения этого поведения. Это полезно в некоторых случаях, таких как использование виртуальных хостов по имени.

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/api'],
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    ],
  },
};

devServer.server

'http' | 'https' | 'spdy' string object

v4.4.0+

Позволяет установить сервер и параметры (по умолчанию 'http').

webpack.config.js

module.exports = {
  //...
  devServer: {
    server: 'http',
  },
};

Использование через командную строку:

npx webpack serve --server-type http

Чтобы обслуживать по HTTPS с самоподписанным сертификатом:

webpack.config.js

module.exports = {
  //...
  devServer: {
    server: 'https',
  },
};

Использование через командную строку:

npx webpack serve --server-type https

Чтобы обслуживать по HTTP/2 с использованием spdy с самоподписанным сертификатом:

webpack.config.js

module.exports = {
  //...
  devServer: {
    server: 'spdy',
  },
};

Использование через командную строку:

npx webpack serve --server-type spdy

Используйте синтаксис объекта, чтобы предоставить свой собственный сертификат:

webpack.config.js

module.exports = {
  //...
  devServer: {
    server: {
      type: 'https',
      options: {
        ca: './path/to/server.pem',
        pfx: './path/to/server.pfx',
        key: './path/to/server.key',
        cert: './path/to/server.crt',
        passphrase: 'webpack-dev-server',
        requestCert: true,
      },
    },
  },
};

Использование через командную строку:

npx webpack serve --server-type https --server-options-key ./path/to/server.key --server-options-cert ./path/to/server.crt --server-options-ca ./path/to/ca.pem --server-options-passphrase webpack-dev-server

Он также позволяет устанавливать дополнительные параметры TLS, такие как minVersion, и вы можете напрямую передавать содержимое соответствующих файлов:

webpack.config.js

const fs = require('fs');
const path = require('path');

module.exports = {
  //...
  devServer: {
    server: {
      type: 'https',
      options: {
        minVersion: 'TLSv1.1',
        key: fs.readFileSync(path.join(__dirname, './server.key')),
        pfx: fs.readFileSync(path.join(__dirname, './server.pfx')),
        cert: fs.readFileSync(path.join(__dirname, './server.crt')),
        ca: fs.readFileSync(path.join(__dirname, './ca.pem')),
        passphrase: 'webpack-dev-server',
        requestCert: true,
      },
    },
  },
};

devServer.setupExitSignals

boolean = true

Позволяет закрыть сервер разработки и выйти из процесса при получении сигналов SIGINT и SIGTERM.

webpack.config.js

module.exports = {
  //...
  devServer: {
    setupExitSignals: true,
  },
};

devServer.setupMiddlewares

function (middlewares, devServer)

v4.7.0+

Предоставляет возможность выполнить пользовательскую функцию и применить пользовательский(ие) middleware(ы).

webpack.config.js

module.exports = {
  // ...
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }

      devServer.app.get('/setup-middleware/some/path', (_, response) => {
        response.send('setup-middlewares option GET');
      });

      // Use the `unshift` method if you want to run a middleware before all other middlewares
      // or when you are migrating from the `onBeforeSetupMiddleware` option
      middlewares.unshift({
        name: 'first-in-array',
        // `path` is optional
        path: '/foo/path',
        middleware: (req, res) => {
          res.send('Foo!');
        },
      });

      // Use the `push` method if you want to run a middleware after all other middlewares
      // or when you are migrating from the `onAfterSetupMiddleware` option
      middlewares.push({
        name: 'hello-world-test-one',
        // `path` is optional
        path: '/foo/bar',
        middleware: (req, res) => {
          res.send('Foo Bar!');
        },
      });

      middlewares.push((req, res) => {
        res.send('Hello World!');
      });

      return middlewares;
    },
  },
};

devServer.static

boolean string object [string, object]

Этот параметр позволяет настроить параметры для предоставления статических файлов из каталога (по умолчанию каталог 'public'). Чтобы отключить, установите его в значение false:

webpack.config.js

module.exports = {
  //...
  devServer: {
    static: false,
  },
};

Использование через командную строку:

npx webpack serve --static

Для отключения:

npx webpack serve --no-static

Для отслеживания одного каталога:

webpack.config.js

module.exports = {
  // ...
  devServer: {
    static: ['assets'],
  },
};

Использование через командную строку:

npx webpack serve --static assets

Для отслеживания нескольких статических каталогов:

webpack.config.js

module.exports = {
  // ...
  devServer: {
    static: ['assets', 'css'],
  },
};

Использование через командную строку:

npx webpack serve --static assets --static css

directory

string = path.join(process.cwd(), 'public')

Укажите, откуда сервер должен предоставлять контент. Это необходимо только если вы хотите предоставлять статические файлы. static.publicPath будет использоваться для определения, откуда должны предоставляться сборки, и имеет приоритет.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
  },
};

Предоставьте массив объектов, если у вас несколько статических папок:

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: [
      {
        directory: path.join(__dirname, 'assets'),
      },
      {
        directory: path.join(__dirname, 'css'),
      },
    ],
  },
};

staticOptions

object

Можно настроить дополнительные параметры для предоставления статических файлов из static.directory. Обратитесь к документации Express для возможных вариантов.

webpack.config.js

module.exports = {
  //...
  devServer: {
    static: {
      staticOptions: {
        redirect: true,
      },
    },
  },
};

publicPath

string = '/' [string]

Укажите URL, на котором сервер должен предоставлять контент из static.directory. Например, чтобы предоставить файл assets/manifest.json по адресу /serve-public-path-url/manifest.json, конфигурация должна быть следующей:

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'assets'),
      publicPath: '/serve-public-path-url',
    },
  },
};

Предоставьте массив объектов, если у вас несколько статических папок:

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: [
      {
        directory: path.join(__dirname, 'assets'),
        publicPath: '/serve-public-path-url',
      },
      {
        directory: path.join(__dirname, 'css'),
        publicPath: '/other-serve-public-path-url',
      },
    ],
  },
};

serveIndex

boolean object = { icons: true }

Укажите, чтобы dev-сервер использовал middleware serveIndex при его включении.

Middleware serveIndex генерирует списки каталогов при просмотре каталогов, у которых нет файла index.html.

webpack.config.js

const path = require('path');

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

Использование через командную строку:

npx webpack serve --static-serve-index

Для отключения:

npx webpack serve --no-static-serve-index

watch

boolean object

Укажите, чтобы dev-сервер отслеживал файлы, указанные в параметре static.directory. По умолчанию включено, и изменения файлов приведут к полной перезагрузке страницы. Это можно отключить, установив параметр watch в значение false.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
      watch: false,
    },
  },
};

Использование через командную строку:

npx webpack serve --static-watch

Для отключения:

npx webpack serve --no-static-watch

Можно настроить дополнительные параметры для отслеживания статических файлов из static.directory. Обратитесь к документации chokidar для возможных опций.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
      watch: {
        ignored: '*.txt',
        usePolling: false,
      },
    },
  },
};

devServer.watchFiles

string object [string, object]

Этот параметр позволяет настроить список шаблонов, каталогов или файлов для отслеживания изменений файлов. Например:

webpack.config.js

module.exports = {
  //...
  devServer: {
    watchFiles: ['src/**/*.php', 'public/**/*'],
  },
};

Можно настроить дополнительные параметры для отслеживания файлов. Обратитесь к документации chokidar для возможных опций.

webpack.config.js

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

devServer.webSocketServer

false | 'sockjs' | 'ws' string function object

Этот параметр позволяет выбрать текущий веб-сокет сервер или предоставить собственную реализацию веб-сокет сервера.

Текущий режим по умолчанию 'ws'. Этот режим использует ws в качестве сервера и native WebSockets на клиенте.

webpack.config.js

module.exports = {
  //...
  devServer: {
    webSocketServer: 'ws',
  },
};

Чтобы создать собственную реализацию сервера, создайте класс, который расширяет BaseServer.

Используя путь к CustomServer.js, реализации пользовательского WebSocket-сервера вместе с совместимым 'ws' клиентом:

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketTransport: 'ws',
    },
    webSocketServer: require.resolve('./CustomServer'),
  },
};

Использование пользовательских, совместимых реализаций WebSocket-клиента и -сервера:

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketTransport: require.resolve('./CustomClient'),
    },
    webSocketServer: require.resolve('./CustomServer'),
  },
};