webpack dev server что это

Настройка Webpack 5 с нуля

Узнайте, как использовать вебпак для сборки JavaScript, изображений, шрифтов и стилей, а также как запускать сервер для разработки

Если вы раньше использовали вебпак 4, вот некоторые отличия от 5 версии:

Что такое вебпак?

По большей части, сайты больше не пишутся на чистом HTML с небольшим количеством JavaScript — часто они создаются только с помощью JavaScript. Поэтому возникает необходимость в сборке, минификации и транспиляции кода. Вот где вебпак приходит на помощь.

Вебпак — это сборщик модулей. Он служит для упаковки кода для использования браузером. Он позволяет использовать последние возможности JavaScript с помощью Babel или использовать TypeScript и компилировать его в кроссбраузерный минифицированный код. Он также позволяет импортировать статические ресурсы в JavaScript.

Для разработчиков вебпак также предоставляет сервер для разработки, который умеет обновлять модули и стили на лету при сохранении файла. Инструменты командной строки, такие как «vue create» и «react-create-app» используют вебпак за сценой, но вы легко можете создать собственную настройку вебпака для указанных фреймворков.

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

Установка

Создаем директорию проекта и инициализируем его:

Устанавливаем webpack и webpack-cli в качестве зависимостей для разработки:

Отлично, у нас имеется Node.js-проект с установленными основными пакетами и файл «index.js». Займемся настройкой вебпака.

Базовая настройка

Приступим к настройке сборщика. Создаем файл «webpack.config.js» в корневой директории проекта.

Точка входа

Прежде всего, необходимо определить точку входа приложения, т.е. то, какие файлы вебпак будет компилировать. В приведенном примере мы определяем точку входа как «src/index.js»:

Точка выхода

Точка выхода — это директория, в которую помещаются скомпилированные вебпаком файлы. Установим точку выхода как «dist». Префикс «[name]» соответствует названию файла в src:

Минимальная настройка для сборки проекта готова. Добавляем скрипт «build» в файл «package.json», запускающий команду «webpack»:

В директории «dist» создается файл «index.bundle.js». Файл не изменился, но мы успешно осуществили сборку проекта.

Плагины

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

Плагин создания HTML на основе шаблона

У нас есть готовая сборка, но она бесполезна без разметки, которая загрузит сборку в качестве скрипта. Поскольку мы хотим, чтобы такой HTML-файл генерировался автоматически, используем html-webpack-plugin.

Создаем файл «template.html» в директории «src». Мы можем добавить в шаблон переменные и другую информацию. Добавим переменную «title», в остальном шаблон будет выглядеть как обычный HTML-файл с контейнером с идентификатором «root»:

Добавляем в настройки вебпака свойство «plugins», где определяем плагин, название выходного файла (index.html) и шаблон:

Запускаем сборку. Директория «dist» теперь содержит файл «index.html» с подключенным в нем скриптом. Круто! Если вы откроете этот файл в браузере, то увидите сообщение «Как интересно!» в консоли.

Добавим немного контента в DOM. Изменим содержимое файла «index.js» и перезапустим сборку.

В открывшейся вкладке браузера вы должны увидеть заголовок, гласящий «Как интересно!». Также обратите внимание на уменьшение размера файла.

Очистка

Установим clean-webpack-plugin, очищающий директорию «dist» при каждой сборке проекта. Это позволяет автоматически удалять старые файлы, ставшие ненужными.

Модули и загрузчики

Вебпак использует загрузчики для разбора файлов, загружаемых с помощью модулей. Это могут быть JavaScript-файлы, статические ресурсы, такие как изображения или стили и компиляторы, такие как TypeScript и Babel. Вебпак 5 имеет несколько встроенных загрузчиков ресурсов.

В нашем проекте имеется HTML-файл, который загружает некоторый скрипт, но больше он ничего не делает. Давайте подумаем, чего мы хотим от сборщика?

Babel (JavaScript)

Babel — это инструмент, позволящий использовать будущий JavaScript сегодня.

Мы собираемся определить правило, согласно которому все файлы с расширением «js» в проекте (кроме файлов, содержащихся в директории «node_modules») будут транспилироваться с помощью babel-loader. Для работы Babel требуется несколько зависимостей:

Если вы настраиваете TypeScript-проект, то вместо babel-loader следует использовать typescript-loader для всех JavaScript-файлов, нуждающихся в транспиляции. Вы проверяете файлы с расширением «ts» и используете ts-loader.

Итак, Babel настроен, но плагин еще нет. Вы можете убедиться в этом, добавив следующий код в начало index.js:

Для того, чтобы это исправить, создаем файл «.babelrc» в корне проекта:

Запускаем сборку с помощью yarn build. Теперь все работает.

Изображения

Мы хотим импортировать изображения в JavaScript-файл, но JavaScript не умеет этого делать. Чтобы убедиться в этом, создаем директорию «src/images», помещаем туда изображение и пытаемся импортировать его в файле «index.js»:

При запуске сборки будет выброшено исключение:

Как отмечалось ранее, вебпак обладает некоторыми встроенными загрузчиками для работы со статическими файлами. Для изображений следует использовать тип «asset/resource». Обратите внимание, что речь идет именно о типе (type), а не о загрузчике (loader):

В директории «dist» появляется новый файл.

Шрифты и другие встраиваемые данные

Вебпак также имеет встроенный модуль для обработки некоторых встраеваемых данных, таких как шрифты и SVG. Для этого достаточно указать тип «asset/inline»:

Стили

Использование загрузчиков стилей является необходимым условием использования строк наподобие «import ‘file.css’» в скрипте.

Многие люди используют CSS-in-JS, стилизованные компоненты (styled components) и другие инструменты, позволяющие использовать стили в JavaScript.

Порой мы можем ограничиться загрузкой одного CSS-файла. Но, возможно, вы хотите использовать PostCSS, позволяющий использовать последние возможности CSS в браузере. Или вы хотите использовать препроцессор Sass.

Я хочу использовать все три — писать код на Sass, обрабатывать его с помощью PostCSS и компилировать в CSS.

Как и для Babel, для PostCSS требуется отдельный файл настроек:

Для проверки работоспособности названных инструментов создадим файл «src/styles/main.scss», содержащий переменные Sass и пример использования PostCSS (lch):

Импортируем этот файл в index.js и добавляем 4 загрузчика. Загрузчики используются вебпаком справа налево, так что последним должен быть sass-loader, затем PostCSS, затем CSS и, наконец, style-loader, который применяет скомпилированные стили к элементам DOM:

После сборки вы заметите, что Sass и PostCSS применились к DOM.

Обратите внимание, что мы установили настройки для режима разработки. Для продакшна следует использовать MiniCssExtractPlugin вместо style-loader, который экспортирует минифицированный CSS.

Разработка

Каждый раз набирать команду yarn build (npm run build) при необходимости повторной сборки проекта может быть утомительным. Чем больше проект, тем дольше он будет собираться. Поэтому необходимо иметь два файла настроек вебпака:

Для этого необходимо установить webpack-dev-server.

В целях демонстрации принципов использования сервера для разработки мы можем определить соответствующие настройки в файле «webpack.config.js». На практике лучше иметь два файла настроек: один с mode: production и другой с mode: development. В специально подготовленной для вас webpack 5 boilerplate я использую webpack-merge для получения базовых настроек в виде одного файла, а специальные требования содержатся в файлах «webpack.prod.js» и «webpack.dev.js».

Мы добавили mode: development и свойство «devServer». В данном свойстве содержится несколько стандартных настроек — номер порта (8080), автоматическое открытие браузера, использование hot-module-replacement, для которого нужен webpack.HotModuleReplacement(). Это позволит модулям обновляться без полной перезагрузки страницы, т.е. если изменятся отдельные стили, только они будут обновлены, вам не потребуется перезагружать JavaScript, что очень сильно ускоряет разработку.

Для запуска сервера используется команда «webpack serve»:

После запуска этой команды браузер откроется по адресу localhost:8080. Теперь вы можете изменять Sass и JavaScript и они будут обновляться на лету.

Источник

10 особенностей Webpack

Webpack считается лучшим инструментом для сборки приложений на React и Redux. Полагаю, многие из тех, кто сегодня использует Angular 2 и другие фреймворки, не обходят вниманием и Webpack. И поскольку начинать работу с данным инструментом всегда непросто, я решил посвятить этой теме несколько публикаций в надежде облегчить старт другим разработчикам и заодно продемонстрировать некоторые особенности Webpack.

Когда я впервые увидел его файл конфигурации, он показался мне крайне странным и путанным. Но спустя некоторое время я понял, что всё дело в уникальном синтаксисе Webpack и несколько иной философии, которая может поначалу немного сбить с толку. Но, с другой стороны, именно эта новая философия и делает Webpack таким популярным.

Философия Webpack

Можно выделить 2 основных принципа философии Webpack:

1. Development и production

Прежде всего нужно понять, что Webpack имеет множество функций, часть которых ориентирована на development, другая – на production, а третья – на то и на другое.

Пример Webpack-файлов для development и production

Большинство проектов используют так много функций, что у них, как правило, есть 2 больших файла конфигурации Webpack.

Для создания бандлов вам, скорее всего, потребуется писать скрипты в package.json, примерно так:

2. webpack CLI и webpack-dev-server

Важно отметить что Webpack, как сборщик модулей, предоставляет 2 интерфейса:

Этот инструмент берет опции через инструмент CLI, а также через файл конфигурации (по умолчанию – webpack.config.js) и передает их в Webpack для сборки.

И хотя вы можете начать изучение Webpack, используя CLI-инструмент, он по большей части пригодится вам только для последующей генерации production-сборок.

Webpack-dev-server (подходит для development-сборок)

Это Express Node.js сервер, который работает на порту 8080. Этот сервер вызывает Webpack изнутри, что дает дополнительные возможности вроде перезагрузки браузера (Live Reloading) и/или замены только что измененного модуля (Hot Module Replacement, или HMR).

Webpack и опции инструмента webpack-dev-server

Стоит отметить, что некоторые опции, такие как inline и hot, используются только для инструмента webpack-dev-server, в то время как, скажем, hide-modules подходят только для CLI.

Опции webpack-dev-server CLI и опции config

Стоит также отметить, что существует 2 способа передачи опций в webpack-dev-server:

Я обнаружил, что devServer config (hot:true и inline:true) иногда не работает. Поэтому я предпочитаю передавать опции как CLI-опции внутри package.json, вот так:

Опции hot и inline для webpack-dev-server

Опция inline добавляет Live Reloading для всей страницы. Опция hot включает Hot Module Reloading – горячую перезагрузку модуля, которая перезагружает только измененный компонент (а не всю страницу). Если передать обе опции, то при изменении источника webpack-dev-server запустит прежде всего HMR и, только если это не сработает, перезагрузит всю страницу.

3. entry– строка, массив и объект

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

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

Разные типы entry с одинаковым результатом

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

Например, если вам понадобится googleAnalytics.js в вашем HTML, можно сделать так, чтобы Webpack добавил этот файл в конец bundle.js:

Предположим, у вас настоящее многостраничное приложение, не SPA с мультипросмотром, а несколько HTML-файлов (index.html и profile.html). С помощью Webpack вы можете сразу сгенерировать множество бандлов, используя объект entry.

Файл конфигурации на примере ниже будет генерировать 2 JS-файла: indexEntry.js и profileEntry.js, которые можно использовать в index.html и profile.html соответственно.

Примечание: название файла происходит от ключей объекта entry

Вы также можете использовать entry-массивы внутри entry-объекта. К примеру, следующий файл конфигурации сгенерирует 3 файла: index.js, profile.js и vendor.js, содержащий 3 vendor-файла.

4. output – path и publicPath

output сообщает Webpack, где и как хранить результирующие файлы. У output есть 2 свойства, path и publicPath, поначалу это может немного смутить.

Свойство path сообщает Webpack, где хранить результат, тогда как свойство publicPath используется в нескольких плагинах Webpack для обновления URL внутри CSS- и HTML-файлов во время генерации production-сборок.

Использование свойства publicPath для development и production

Но вместо этого можно применить свойство publicPath, а также целый ряд сопряженных плагинов, чтобы автоматически обновлять все URL при генерации production-сборок.

Пример publicPath production

5. Загрузчики и цепочки загрузчиков

Загрузчики – это дополнительные узловые модули, которые помогают загружать или импортировать файлы разных типов в совместимых с браузерами форматах – JS, CSS и т. д. Последующие загрузчики также позволяют импортировать такие файлы в JS, используя require или import в ES6.

Например, вы можете использовать babel-loader для конвертации JS-файла, написанного на ES6, в совместимый с браузером ES5:

Цепочки загрузчиков (работают справа налево)

Несколько загрузчиков для одного типа файлов можно объединить в цепочку. Формирование цепочек осуществляется справа налево, а загрузчики отделяются восклицательным знаком: «!».

Предположим, у нас есть CSS-файл myCssFile.css, и мы хотим выгрузить его содержимое в тег внутри HTML. Это можно сделать, используя 2 загрузчика: css-loader и style-loader.

Вот как это работает:

6. Настройка загрузчиков

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

В следующем примере url-loader настроен таким образом, чтобы использовать DataURL для изображений размером менее 1024 байт и URL для изображений размером более 1024 байт. Это можно осуществить, передав параметр limit одним из двух способов:

babel-loader использует настройку presets, чтобы правильно конвертировать ES6 в ES5 и парсить React JSX в JS. Настройки можно передать через параметр query, как показано ниже:

Это должно выглядеть примерно так:

8. Плагины

Плагины – это дополнительные узловые модули, которые работают с результирующим бандлом.

К примеру, uglifyJSPlugin берет bundle.js, а затем минимизирует и обфусцирует его содержимое, чтобы уменьшить размер файла.

Аналогичным образом extract-text-webpack-plugin внутренне использует css-loader и style-loader, чтобы собрать все CSS-файлы в одном месте. Этот плагин извлекает результат во внешний файл styles.css и добавляет ссылку на этот файл в index.html.

Примечание: если вы хотите просто встроить CSS как элемент стиля в HTML, это можно сделать без плагина extract-text-webpack-plugin, а за счет CSS и загрузчиков стилей, как показано ниже:

9. Загрузчики и плагины

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

В свою очередь, плагины работают на уровне бандла или фрагмента по окончании генерации бандла. А некоторые плагины вроде commonsChunksPlugins пошли еще дальше и изменили способ создания самих бандлов.

10. Разрешение файловых расширений

Источник

Webpack: руководство для начинающих

Доброго времени суток, друзья!

Представляю вашему вниманию перевод статьи «Webpack: A gentle introduction» автора Tyler McGinnis.

Перед изучением новой технологии задайте себе два вопроса:

Зачем нужен вебпак?

Вебпак — это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один или более бандл (bundle), на который может ссылаться файл «index.html».

Какие проблемы решает вебпак?

Обычно, при создании приложения на JavaScript, код разделяется на несколько частей (модулей). Затем в файле «index.html» необходимо указать ссылку на каждый скрипт.

Это не только утомительно, но и подвержено ошибкам. Важно не только не забыть про какой-нибудь скрипт, но и расположить их в правильном порядке. Если загрузить скрипт, зависящий от React, до загрузки самого React, приложение сломается. Вебпак решает эти задачи. Не нужно беспокоиться о последовательном включении всех скриптов.

Как мы скоро узнаем, сбор модулей является лишь одним из аспектов работы вебпака. При необходимости можно заставить вебпак осуществить некоторые преобразования модулей перед их добавлением в бандл. Например, преобразование SASS/LESS в обычный CSS, или современного JavaScript в ES5 для старых браузеров.

Установка вебпака

webpack.config.js

Основной задачей вебпака является анализ модулей, их опциональное преобразование и интеллектуальное объединение в один или более бандл, поэтому вебпаку нужно знать три вещи:

Точка входа

Сколько бы модулей не содержало приложение, всегда имеется единственная точка входа. Этот модуль включает в себя остальные. Обычно, таким файлом является index.js. Это может выглядеть так:

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

Преобразования с помощью лоадеров (loaders)

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

По умолчанию при создании графика зависимостей на основе операторов import / require() вебпак способен обрабатывать только JavaScript и JSON-файлы.

Едва ли в своем приложении вы решитесь ограничиться JS и JSON-файлами, скорее всего, вам также потребуются стили, SVG, изображения и т.д. Вот где нужны лоадеры. Основной задачей лоадеров, как следует из их названия, является предоставление вебпаку возможности работать не только с JS и JSON-файлами.

Первым делом нужно установить лоадер. Поскольку мы хотим загружать SVG, с помощью npm устанавливаем svg-loader.

Далее добавляем его в настройки вебпака. Все лоадеры включаются в массив объектов module.rules :

Существуют лоадеры почти для любого типа файлов.

Точка выхода

Теперь вебпак знает о точке входа и лоадерах. Следующим шагом является указание директории для бандла. Для этого нужно добавить свойство output в настройки вебпака.

Весь процесс выглядит примерно так:

Плагины (plugins)

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

Давайте рассмотрим пример.

HtmlWebpackPlugin

HtmlWebpackPlugin создает index.html в директории с бандлом и автоматически добавляет в него ссылку на бандл.

Как нам использовать этот плагин? Как обычно, сначала его нужно установить.

EnvironmentPlugin

HtmlWebpackPlugin и EnvironmentPlugin — это лишь небольшая часть системы плагинов вебпака.

Режим (mode)

Существуют специальные плагины для решения указанных задачи, но есть более легкий способ. В настройках вебпака можно установить mode в значение development или production в зависимости от среды разработки.

Запуск вебпака

На данный момент мы знаем, как работает вебпак и как его настраивать, осталось его запустить.

Режимы разработки и продакшна

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

При сборке для продакшна, мы хотим все оптимизировать, насколько это возможно. В случае с режимом разработки верно обратное.

npm run build будет собирать продакшн-бандл.

npm run start будет запускать сервер для разработки и следить за изменениями файлов.

Сервер для разработки

Теперь у нас имеется две команды: одна для запуска сервера для разработки, другая для сборки готового бандла.

Надеюсь, статья была вам полезной. Благодарю за внимание.

Источник

DevServer

webpack-dev-server can be used to quickly develop an application. See the development guide to get started.

warning

devServer

This set of options is picked up by webpack-dev-server and can be used to change its behavior in various ways. Here’s a rudimentary example that gzips and serves everything from our public/ directory in the project root:

webpack.config.js

When the server is started, there will be a message prior to the list of resolved modules:

that will give some background on where the server is located and what it’s serving.

warning

Be aware that when exporting multiple configurations only the devServer options for the first configuration will be taken into account and used for all the configurations in the array.

HTML template is required to serve the bundle, usually, it is an index.html file. Make sure that script references are added into HTML, webpack-dev-server doesn’t inject them automatically.

Usage via CLI

You can invoke webpack-dev-server via CLI by:

A list of CLI options for serve is available here

Usage via API

While it’s recommended to run webpack-dev-server via the CLI, you may also choose to start a server via the API.

devServer.allowedHosts

This option allows you to whitelist services that are allowed to access the dev server.

webpack.config.js

When set to ‘all’ this option bypasses host checking. THIS IS NOT RECOMMENDED as apps that do not check the host are vulnerable to DNS rebinding attacks.

webpack.config.js

devServer.bonjour

boolean = false object

This option broadcasts the server via ZeroConf networking on start.

webpack.config.js

You can also pass custom options to bonjour, for example:

webpack.config.js

devServer.client

logging

Allows to set log level in the browser, e.g. before reloading, before an error or when Hot Module Replacement is enabled.

webpack.config.js

overlay

boolean = true object:

Shows a full-screen overlay in the browser when there are compiler errors or warnings.

webpack.config.js

If you want to show only errors:

webpack.config.js

progress

Prints compilation progress in percentage in the browser.

webpack.config.js

reconnect

boolean = true number

Tells dev-server the number of times it should try to reconnect the client. When true it will try to reconnect unlimited times.

webpack.config.js

When set to false it will not try to reconnect.

You can also specify the exact number of times the client should try to reconnect.

webSocketTransport

Providing ‘ws’ or ‘sockjs’ to webSocketServer is a shortcut to setting both devServer.client.webSocketTransport and devServer.webSocketServer to the given value.

webpack.config.js

When providing a custom client and server implementation make sure that they are compatible with one another to communicate successfully.

webpack.config.js

Using custom, compatible WebSocket client and server implementations:

webpack.config.js

webSocketURL

This option allows specifying URL to web socket server (useful when you’re proxying dev server and client script does not always know where to connect to).

webpack.config.js

You can also specify an object with the following properties:

webpack.config.js

devServer.compress

Enable gzip compression for everything served:

webpack.config.js

devServer.devMiddleware

Provide options to webpack-dev-middleware which handles webpack assets.

webpack.config.js

devServer.http2

Serve over HTTP/2 using spdy. This option is ignored for Node 15.0.0 and above, as spdy is broken for those versions. The dev server will migrate over to Node’s built-in HTTP/2 once Express supports it.

HTTP/2 with a self-signed certificate:

webpack.config.js

Provide your own certificate using the https option:

webpack.config.js

To pass your certificate via CLI, use the following options:

warning

This option is deprecated in favor of devServer.server option.

devServer.https

webpack.config.js

With the above setting, a self-signed certificate is used, but you can provide your own:

webpack.config.js

This object is passed straight to the Node.js HTTPS module, so see the HTTPS documentation for more information.

To pass your own certificate via the CLI use the following options:

webpack.config.js

warning

Don’t specify https.ca and https.cacert options together, if specified https.ca will be used. https.cacert is deprecated and will be removed in the next major release.

warning

This option is deprecated in favor of devServer.server option.

devServer.headers

array function object

Adds headers to all responses:

webpack.config.js

You can also pass an array:

webpack.config.js

You can also pass a function:

devServer.historyApiFallback

boolean = false object

When using the HTML5 History API, the index.html page will likely have to be served in place of any 404 responses. Enable devServer.historyApiFallback by setting it to true :

webpack.config.js

By providing an object this behavior can be controlled further using options like rewrites :

webpack.config.js

When using dots in your path (common with Angular), you may need to use the disableDotRule :

webpack.config.js

For more options and information, see the connect-history-api-fallback documentation.

devServer.host

‘local-ip’ | ‘local-ipv4’ | ‘local-ipv6’ string

Specify a host to use. If you want your server to be accessible externally, specify it like this:

webpack.config.js

This also works with IPv6:

local-ip

Specifying local-ip as host will try to resolve the host option as your local IPv4 address if available, if IPv4 is not available it will try to resolve your local IPv6 address.

local-ipv4

Specifying local-ipv4 as host will try to resolve the host option as your local IPv4 address.

local-ipv6

Specifying local-ipv6 as host will try to resolve the host option as your local IPv6 address.

devServer.hot

‘only’ boolean = true

webpack.config.js

To enable Hot Module Replacement without page refresh as a fallback in case of build failures, use hot: ‘only’ :

webpack.config.js

devServer.ipc

The Unix socket to listen to (instead of a host ).

Setting it to true will listen to a socket at /your-os-temp-dir/webpack-dev-server.sock :

webpack.config.js

You can also listen to a different socket with:

webpack.config.js

devServer.liveReload

By default, the dev-server will reload/refresh the page when file changes are detected. devServer.hot option must be disabled or devServer.watchFiles option must be enabled in order for liveReload to take effect. Disable devServer.liveReload by setting it to false :

webpack.config.js

warning

devServer.magicHtml

Tell dev-server to enable/disable magic HTML routes (routes corresponding to your webpack output, for example /main for main.js ).

webpack.config.js

devServer.onAfterSetupMiddleware

Provides the ability to execute custom middleware after all other middleware internally within the server.

webpack.config.js

devServer.onBeforeSetupMiddleware

Provides the ability to execute custom middleware prior to all other middleware internally within the server. This could be used to define custom handlers, for example:

webpack.config.js

devserver.onListening

Provides the ability to execute a custom function when webpack-dev-server starts listening for connections on a port.

webpack.config.js

devServer.open

boolean string [string] object [object]

Tells dev-server to open the browser after server had been started. Set it to true to open your default browser.

webpack.config.js

To open a specified page in a browser:

webpack.config.js

To open multiple specified pages in browser:

webpack.config.js

Provide browser name to use instead of the default one:

webpack.config.js

The object accepts all open options:

webpack.config.js

The browser application name is platform-dependent. Don’t hard code it in reusable modules. For example, ‘Chrome’ is ‘Google Chrome’ on macOS, ‘google-chrome’ on Linux, and ‘chrome’ on Windows.

devServer.port

‘auto’ string number

Specify a port number to listen for requests on:

webpack.config.js

port option can’t be null or an empty string, to automatically use a free port please use port: ‘auto’ :

webpack.config.js

devServer.proxy

object [object, function]

Proxying some URLs can be useful when you have a separate API backend development server and you want to send API requests on the same domain.

The dev-server makes use of the powerful http-proxy-middleware package. Check out its documentation for more advanced usages. Note that some of http-proxy-middleware ‘s features do not require a target key, e.g. its router feature, but you will still need to include a target key in your configuration here, otherwise webpack-dev-server won’t pass it along to http-proxy-middleware ).

webpack.config.js

If you don’t want /api to be passed along, we need to rewrite the path:

webpack.config.js

A backend server running on HTTPS with an invalid certificate will not be accepted by default. If you want to, modify your configuration like this:

webpack.config.js

Sometimes you don’t want to proxy everything. It is possible to bypass the proxy based on the return value of a function.

In the function, you get access to the request, response, and proxy options.

E.g. for a browser request, you want to serve an HTML page, but for an API request, you want to proxy it. You could do something like this:

webpack.config.js

If you want to proxy multiple, specific paths to the same target, you can use an array of one or more objects with a context property:

webpack.config.js

Note that requests to root won’t be proxied by default. To enable root proxying, the devMiddleware.index option should be specified as a falsy value:

webpack.config.js

The origin of the host header is kept when proxying by default, you can set changeOrigin to true to override this behaviour. It is useful in some cases like using name-based virtual hosted sites.

webpack.config.js

devServer.server

‘http’ | ‘https’ | ‘spdy’ string object

Allows to set server and options (by default ‘http’).

webpack.config.js

To serve over HTTPS with a self-signed certificate:

webpack.config.js

To serve over HTTP/2 using spdy with a self-signed certificate:

webpack.config.js

warning

This option is ignored for Node 15.0.0 and above, as spdy is broken for those versions. The dev server will migrate over to Node’s built-in HTTP/2 once Express supports it.

Use the object syntax to provide your own certificate:

webpack.config.js

It also allows you to set additional TLS options like minVersion and you can directly pass the contents of respective files:

webpack.config.js

devServer.setupExitSignals

Allows to close dev server and exit the process on SIGINT and SIGTERM signals.

webpack.config.js

devServer.static

boolean string [string] object [object]

This option allows configuring options for serving static files from the directory (by default ‘public’ directory). To disable set it to false :

webpack.config.js

To watch a single directory:

webpack.config.js

To watch multiple static directories:

webpack.config.js

staticOptions

webpack.config.js

publicPath

webpack.config.js

Provide an array of objects in case you have multiple static folders:

webpack.config.js

serveIndex

Tell dev-server to use serveIndex middleware when enabled.

serveIndex middleware generates directory listings on viewing directories that don’t have an index.html file.

webpack.config.js

watch

webpack.config.js

devServer.watchFiles

string [string] object [object]

This option allows you to configure a list of globs/directories/files to watch for file changes. For example:

webpack.config.js

It is possible to configure advanced options for watching files. See the chokidar documentation for the possible options.

webpack.config.js

devServer.webSocketServer

false | ‘sockjs’ | ‘ws’ string function object

This option allows us either to choose the current web-socket server or to provide custom web-socket server implementation.

webpack.config.js

Using custom, compatible WebSocket client and server implementations:

Источник