Spec-Zone.ru › webpack 4

DevServer

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

На этой странице описаны параметры, влияющие на поведение webpack-dev-server (сокращённо dev-server).

Параметры, совместимые с webpack-dev-middleware, помечены значком 🔑.

devServer

object

Этот набор опций используется webpack-dev-server и может использоваться для изменения его поведения различными способами. Вот простой пример, который сжимает (gzips) и предоставляет все файлы из каталога dist/ в корне проекта:

webpack.config.js

var path = require('path');

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

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

http://localhost:9000/
webpack output is served from /build/
Content not from webpack is served from /path/to/dist/

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

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

Обратите внимание, что при экспорте нескольких конфигураций только параметры devServer первой конфигурации будут учтены и использованы для всех конфигураций в массиве.

Если у вас возникнут проблемы, перейдите по адресу /webpack-dev-server , чтобы увидеть, где подаются файлы. Например, http://localhost:9000/webpack-dev-server.

Для отображения пакета необходим шаблон HTML, обычно это файл index.html. Убедитесь, что в HTML добавлены ссылки на скрипты, webpack-dev-server не вставляет их автоматически.

devServer.after

function (app, server, compiler)

Позволяет выполнить пользовательский middleware после всех других middleware внутри сервера.

webpack.config.js

module.exports = {
  //...
  devServer: {
    after: function(app, server, compiler) {
      // do fancy stuff
    }
  }
};

devServer.allowedHosts

[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'
    ]
  }
};

Для использования этого параметра в командной строке передайте значение --allowed-hosts в виде запятой-разделённой строки.

webpack-dev-server --entry /entry/file --output-path /output/path --allowed-hosts .host.com,host2.com

devServer.before

function (app, server, compiler)

Позволяет выполнить пользовательский middleware до всех других middleware внутри сервера. Это можно использовать для определения пользовательских обработчиков, например:

webpack.config.js

module.exports = {
  //...
  devServer: {
    before: function(app, server, compiler) {
      app.get('/some/path', function(req, res) {
        res.json({ custom: 'response' });
      });
    }
  }
};

devServer.bonjour

boolean = false

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

webpack.config.js

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

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

webpack-dev-server --bonjour

devServer.clientLogLevel

string = 'info': 'silent' | 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'none' | 'warning'

none и warning будут устаревшими в следующей основной версии.

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

devServer.clientLogLevel может быть слишком подробным, вы можете отключить логирование, установив его в значение 'silent'.

webpack.config.js

module.exports = {
  //...
  devServer: {
    clientLogLevel: 'silent'
  }
};

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

webpack-dev-server --client-log-level silent

devServer.color - только CLI

boolean

Включает/отключает цвет в консоли.

webpack-dev-server --color

devServer.compress

boolean

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

webpack.config.js

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

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

webpack-dev-server --compress

devServer.contentBase

boolean: false string [string] number

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

Рекомендуется использовать абсолютный путь.

По умолчанию используется текущая рабочая директория для предоставления контента. Для отключения contentBase установите его в значение false.

webpack.config.js

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

Также можно предоставлять контент из нескольких директорий:

webpack.config.js

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

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

webpack-dev-server --content-base /path/to/content/dir

devServer.disableHostCheck

boolean

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

webpack.config.js

module.exports = {
  //...
  devServer: {
    disableHostCheck: true
  }
};

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

webpack-dev-server --disable-host-check

devServer.filename 🔑

string

Этот параметр позволяет уменьшить количество компиляций в режиме ленивой загрузки. По умолчанию в режиме ленивой загрузки каждый запрос приводит к новой компиляции. С filename, можно компилировать только при запросе определённого файла.

Если output.filename установлено в 'bundle.js' и devServer.filename используется так:

webpack.config.js

module.exports = {
  //...
  output: {
    filename: 'bundle.js'
  },
  devServer: {
    lazy: true,
    filename: 'bundle.js'
  }
};

Теперь пакет будет компилироваться только при запросе /bundle.js.

filename не имеет эффекта, если используется без режима ленивой загрузки.

devServer.headers 🔑

object

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

webpack.config.js

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

devServer.historyApiFallback

boolean = false object

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

webpack.config.js

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

Передав объект, это поведение можно дополнительно контролировать, используя такие параметры, как 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
    }
  }
};

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

webpack-dev-server --history-api-fallback

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

devServer.host

string = 'localhost'

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

webpack.config.js

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

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

webpack-dev-server --host 0.0.0.0

devServer.hot

boolean

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

webpack.config.js

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

Обратите внимание, что webpack.HotModuleReplacementPlugin требуется для полной активации HMR. Если webpack или webpack-dev-server запускаются с параметром --hot, этот плагин будет добавлен автоматически, так что вам может не понадобиться добавлять его в свой webpack.config.js. Дополнительную информацию см. на странице концепций HMR.

devServer.hotOnly

boolean

Включает горячую замену модулей (см. devServer.hot) без перезагрузки страницы в качестве резервного варианта в случае ошибок сборки.

webpack.config.js

module.exports = {
  //...
  devServer: {
    hotOnly: true
  }
};

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

webpack-dev-server --hot-only

devServer.http2

boolean = false

Обеспечивает предоставление через HTTP/2 с помощью spdy. Этот параметр игнорируется для Node 10.0.0 и выше, так как spdy не работает для этих версий. Dev-сервер переключится на встроенный HTTP/2 Node, как только Express его поддержит.

Если devServer.http2 не явно установлен в значение false, он будет по умолчанию установлен в true при включенном devServer.https. Когда devServer.http2 включён, но сервер не может предоставлять через HTTP/2, сервер переходит к HTTPS.

HTTP/2 с самоподписанным сертификатом:

webpack.config.js

module.exports = {
  //...
  devServer: {
    http2: true
  }
};

Укажите собственный сертификат с помощью параметра https:

webpack.config.js

module.exports = {
  //...
  devServer: {
    http2: true,
    https: {
      key: fs.readFileSync('/path/to/server.key'),
      cert: fs.readFileSync('/path/to/server.crt'),
      ca: fs.readFileSync('/path/to/ca.pem'),
    }
  }
};

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

webpack-dev-server --http2

Для передачи собственного сертификата через командную строку используйте следующие параметры

webpack-dev-server --http2 --key /path/to/server.key --cert /path/to/server.crt --cacert /path/to/ca.pem

devServer.https

boolean object

По умолчанию dev-сервер будет предоставляться через HTTP. Его можно дополнительно предоставлять через HTTP/2 с HTTPS:

webpack.config.js

module.exports = {
  //...
  devServer: {
    https: true
  }
};

С указанным выше значением используется самоподписанный сертификат, но вы можете предоставить свой собственный:

webpack.config.js

module.exports = {
  //...
  devServer: {
    https: {
      key: fs.readFileSync('/path/to/server.key'),
      cert: fs.readFileSync('/path/to/server.crt'),
      ca: fs.readFileSync('/path/to/ca.pem'),
    }
  }
};

Этот объект передаётся напрямую в модуль HTTPS Node.js, поэтому для получения дополнительной информации см. документацию HTTPS.

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

webpack-dev-server --https

Для передачи собственного сертификата через командную строку используйте следующие параметры

webpack-dev-server --https --key /path/to/server.key --cert /path/to/server.crt --cacert /path/to/ca.pem

devServer.index

string

Имя файла, который считается файлом индекса.

webpack.config.js

module.exports = {
  //...
  devServer: {
    index: 'index.html'
  }
};

devServer.info - Только командная строка

boolean

Вывод информации командной строки. Включено по умолчанию.

webpack-dev-server --info=false

devServer.injectClient

boolean = false function (compilerConfig) => boolean

Указывает devServer на инъекцию клиента. Установка devServer.injectClient в true приведет к всегда инъекции клиента. Возможна передача функции для условной инъекции:

module.exports = {
  //...
  devServer: {
    injectClient: (compilerConfig) => compilerConfig.name === 'only-include'
  }
};

devServer.injectHot

boolean = false function (compilerConfig) => boolean

Указывает devServer на инъекцию горячей замены модулей. Установка devServer.injectHot в true приведет к всегда инъекции. Возможна передача функции для условной инъекции:

module.exports = {
  //...
  devServer: {
    hot: true,
    injectHot: (compilerConfig) => compilerConfig.name === 'only-include'
  }
};

Убедитесь, что devServer.hot установлено в true, поскольку devServer.injectHot работает только с HMR.

devServer.inline

boolean

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

Также можно использовать режим iframe, который использует <iframe> под панелью уведомлений с сообщениями о сборке. Чтобы переключиться на режим iframe:

webpack.config.js

module.exports = {
  //...
  devServer: {
    inline: false
  }
};

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

webpack-dev-server --inline=false

Рекомендуется режим inline для Горячей замены модулей, так как он включает триггер HMR из веб-сокета. Режим опроса может использоваться как альтернатива, но требует дополнительной точки входа, 'webpack/hot/poll?1000'.

devServer.lazy 🔑

boolean

При включенном devServer.lazy, сервер разработки будет компилировать пакет только при запросе. Это означает, что webpack не будет отслеживать изменения файлов. Мы называем это режимом lazy.

webpack.config.js

module.exports = {
  //...
  devServer: {
    lazy: true
  }
};

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

webpack-dev-server --lazy

watchOptions не будет иметь эффекта при использовании режима lazy.

Если вы используете командную строку, убедитесь, что режим inline отключен.

devServer.liveReload

boolean = true

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

webpack.config.js

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

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

webpack-dev-server --no-live-reload

devServer.mimeTypes 🔑

object

Позволяет серверу разработки регистрировать пользовательские типы MIME. Объект передается в базовый webpack-dev-middleware. Обратитесь к документации для заметок по использованию.

webpack.config.js

module.exports = {
  //...
  devServer: {
    mimeTypes: { 'text/html': ['phtml'] }
  }
};

devServer.noInfo 🔑

boolean = false

Указывает серверу разработки подавлять сообщения, такие как информация о пакете webpack. Ошибки и предупреждения все равно будут отображаться.

webpack.config.js

module.exports = {
  //...
  devServer: {
    noInfo: true
  }
};

devServer.onListening

function (server)

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

webpack.config.js

module.exports = {
  //...
  devServer: {
    onListening: function(server) {
      const port = server.listeningApp.address().port;
      console.log('Listening on port:', port);
    }
  }
};

devServer.open

boolean: false string

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

webpack.config.js

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

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

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: 'Google Chrome'
  }
};

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

webpack-dev-server --open 'Google Chrome'

Имя приложения браузера зависит от платформы. Не встраивайте его в повторно используемые модули. Например, 'Chrome' - 'Google Chrome' на macOS, 'google-chrome' на Linux и 'chrome' на Windows.

devServer.openPage

string [string]

Укажите страницу, на которую перейти при открытии браузера.

webpack.config.js

module.exports = {
  //...
  devServer: {
    openPage: '/different/page'
  }
};

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

webpack-dev-server --open-page "/different/page"

Если вы хотите указать несколько страниц для открытия в браузере.

webpack.config.js

module.exports = {
  //...
  devServer: {
    openPage: ['/different/page1', '/different/page2']
  }
};

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

webpack-dev-server --open-page "/different/page1,/different/page2"

devServer.overlay

boolean = false object: { errors boolean = false, warnings boolean = false }

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

webpack.config.js

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

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

webpack.config.js

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

devServer.pfx

string

При использовании через командную строку путь к файлу SSL .pfx. Если используется в опциях, это должен быть байтовый поток файла .pfx.

webpack.config.js

module.exports = {
  //...
  devServer: {
    pfx: '/path/to/file.pfx'
  }
};

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

webpack-dev-server --pfx /path/to/file.pfx

devServer.pfxPassphrase

string

Пароль к файлу SSL PFX.

webpack.config.js

module.exports = {
  //...
  devServer: {
    pfxPassphrase: 'passphrase'
  }
};

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

webpack-dev-server --pfx-passphrase passphrase

devServer.port

number

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

webpack.config.js

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

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

webpack-dev-server --port 8080

devServer.proxy

object [object, function]

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

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

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

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
};

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

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

webpack.config.js

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

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

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false
      }
    }
  }
};

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

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

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

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

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/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',
    }]
  }
};

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

webpack.config.js

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

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

webpack.config.js

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

devServer.progress - Только командная строка

boolean

Вывод текущего прогресса в консоль.

webpack-dev-server --progress

devServer.public

string

При использовании режима inline и проксировании сервера разработки скрипт клиента inline не всегда знает, куда подключиться. Он будет пытаться угадать URL сервера на основе window.location, но если это не удастся, вам нужно будет использовать это.

Например, сервер разработки проксируется nginx и доступен по myapp.test:

webpack.config.js

module.exports = {
  //...
  devServer: {
    public: 'myapp.test:80'
  }
};

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

webpack-dev-server --public myapp.test:80

devServer.publicPath 🔑

string = '/'

Скомпилированные файлы будут доступны в браузере по этому пути.

Представьте, что сервер работает по http://localhost:8080 и output.filename установлен в bundle.js. По умолчанию devServer.publicPath равен '/', поэтому ваш пакет доступен как http://localhost:8080/bundle.js.

Измените devServer.publicPath для размещения пакета в определенном каталоге:

webpack.config.js

module.exports = {
  //...
  devServer: {
    publicPath: '/assets/'
  }
};

Пакет теперь будет доступен как http://localhost:8080/assets/bundle.js.

Убедитесь, что devServer.publicPath всегда начинается и заканчивается прямой косой чертой.

Также можно использовать полный URL.

webpack.config.js

module.exports = {
  //...
  devServer: {
    publicPath: 'http://localhost:8080/assets/'
  }
};

Пакет также будет доступен как http://localhost:8080/assets/bundle.js.

Рекомендуется, чтобы devServer.publicPath совпадало с output.publicPath.

devServer.quiet 🔑

boolean

При включенном devServer.quiet, в консоль будут выводиться только начальные сведения о запуске. Это также означает, что ошибки или предупреждения webpack не будут отображаться.

webpack.config.js

module.exports = {
  //...
  devServer: {
    quiet: true
  }
};

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

webpack-dev-server --quiet

devServer.serveIndex

boolean = true

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

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

module.exports = {
  //...
  devServer: {
    serveIndex: true
  }
};

devServer.setup

function (app, server)

Этот параметр устарел в пользу devServer.before и будет удален в версии v3.0.0.

Здесь вы можете получить доступ к объекту приложения Express и добавить собственный пользовательский middleware. Например, чтобы определить пользовательские обработчики для некоторых путей:

webpack.config.js

module.exports = {
  //...
  devServer: {
    setup: function(app, server) {
      app.get('/some/path', function(req, res) {
        res.json({ custom: 'response' });
      });
    }
  }
};

devServer.socket

string

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

webpack.config.js

module.exports = {
  //...
  devServer: {
    socket: 'socket'
  }
};

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

webpack-dev-server --socket socket

devServer.sockHost

string

Указывает клиентам, подключенным к devServer, использовать предоставленный хост сокета.

webpack.config.js

module.exports = {
  //...
  devServer: {
    sockHost: 'myhost.test'
  }
};

devServer.sockPath

string = '/sockjs-node'

Путь для подключения к сокету перезагрузки.

webpack.config.js

module.exports = {
  //...
  devServer: {
    sockPath: '/socket',
  }
};

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

webpack-dev-server --sockPath /socket

devServer.sockPort

number string

Указывает клиентам, подключенным к devServer, использовать предоставленный порт сокета.

webpack.config.js

module.exports = {
  //...
  devServer: {
    sockPort: 8080
  }
};

devServer.staticOptions

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

webpack.config.js

module.exports = {
  //...
  devServer: {
    staticOptions: {
      redirect: false
    }
  }
};

Это работает только при использовании devServer.contentBase в качестве string.

devServer.stats 🔑

string: 'none' | 'errors-only' | 'minimal' | 'normal' | 'verbose' object

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

Чтобы отобразить только ошибки в пакете:

webpack.config.js

module.exports = {
  //...
  devServer: {
    stats: 'errors-only'
  }
};

Для получения дополнительной информации см. документацию по параметру stats.

Этот параметр не имеет эффекта при использовании с quiet или noInfo.

devServer.stdin - Только командная строка

boolean

Этот параметр закрывает сервер при завершении stdin.

webpack-dev-server --stdin

devServer.transportMode

string = 'sockjs': 'sockjs' | 'ws' object

transportMode — экспериментальный параметр, поэтому его использование может измениться без предупреждения.

Передача строки в devServer.transportMode — это сокращение для установки как devServer.transportMode.client, так и devServer.transportMode.server в заданное строковое значение.

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

Текущий режим по умолчанию — 'sockjs'. Этот режим использует SockJS-node в качестве сервера и SockJS-client на клиенте.

Режим 'ws' станет режимом по умолчанию в следующей основной версии devServer. Этот режим использует ws в качестве сервера и собственные WebSocket на клиенте.

Использование режима 'ws':

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

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

devServer.transportMode.client

string path

Для создания пользовательской реализации клиента создайте класс, который расширяет BaseClient.

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

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

devServer.transportMode.server

string path function

Для создания пользовательской реализации сервера создайте класс, который расширяет BaseServer.

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

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

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

module.exports = {
  //...
  devServer: {
    transportMode: {
      client: 'ws',
      server: require('./CustomServer')
    }
  }
};

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

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

devServer.useLocalIp

boolean

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

webpack.config.js

module.exports = {
  //...
  devServer: {
    useLocalIp: true
  }
};

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

webpack-dev-server --useLocalIp

devServer.watchContentBase

boolean

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

webpack.config.js

module.exports = {
  //...
  devServer: {
    watchContentBase: true
  }
};

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

webpack-dev-server --watch-content-base

devServer.watchOptions 🔑

object

Управление параметрами, связанными с отслеживанием файлов.

Webpack использует файловую систему для получения уведомлений об изменениях файлов. В некоторых случаях это не работает. Например, при использовании сетевой файловой системы (NFS). Vagrant также имеет много проблем с этим. В этих случаях используйте опрос:

webpack.config.js

module.exports = {
  //...
  devServer: {
    watchOptions: {
      poll: true
    }
  }
};

Если это слишком сильно нагружает файловую систему, вы можете изменить это на целое число, чтобы установить интервал в миллисекундах.

См. WatchOptions для получения дополнительных параметров.

devServer.writeToDisk 🔑

boolean = false function (filePath)

Указывает devServer записывать сгенерированные ресурсы на диск. Результат записывается в каталог output.path.

webpack.config.js

module.exports = {
  //...
  devServer: {
    writeToDisk: true
  }
};

Предоставление Function в devServer.writeToDisk можно использовать для фильтрации. Функция следует той же логике, что и Array#filter, где булево возвращаемое значение указывает, должен ли файл быть записан на диск.

webpack.config.js

module.exports = {
  //...
  devServer: {
    writeToDisk: (filePath) => {
      return /superman\.css$/.test(filePath);
    }
  }
};

© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://v4.webpack.js.org/configuration/dev-server

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API