Webpack 4 Dev Server: Быстрая настройка без конфига

Этот туториал демонстрирует простоту использования сервера разработки Webpack. Создадим проект с нуля и настроим сервер без дополнительных конфигурационных файлов.

Начало работы

  1. Создайте папку проекта, например, my-webpack-dev-server.
  2. Перейдите в неё в командной строке: cd my-webpack-dev-server.
  3. Инициализируйте проект: npm init -y. Создастся файл package.json.
  4. Откройте проект в редакторе кода (например, Visual Studio Code с помощью code .).

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

Установите необходимые пакеты:

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

Для установки конкретных версий (замените на актуальные):

npm install --save-dev webpack@4.22.2 webpack-cli@3.1.2 webpack-dev-server@3.1.10

Обратите внимание, что установится много зависимостей (см. package-lock.json).

Создание файлов проекта

Создайте файлы: index.html, папку src с файлами index.js и greeting.js. Содержание файлов:

index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Webpack Dev Server</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

src/index.js:

import greet from './greeting.js';

console.log('index.js file');
console.log(greet('Bogdan'));

src/greeting.js:

export default (name) => `Hello ${name}!`;

Скрипты сборки в package.json

Добавьте скрипты в package.json: build для сборки и start:dev для запуска сервера:

{
  // ... другие настройки ...
  "scripts": {
    "build": "webpack",
    "start:dev": "webpack-dev-server"
  }
}

Сборка и запуск

Выполните npm run build. Webpack соберет файлы в dist, создав main.js. Обратите внимание на предупреждение о режиме production (используется по умолчанию).

Выполните npm run start:dev. Webpack Dev Server запустится на localhost:8080. Сервер обслуживает бандл из памяти. Обратите внимание на предупреждение о режиме production. Убедитесь, что в index.html указан правильный путь к main.js. Ошибка 404 указывает на неверный путь.

Горячая перезагрузка

Webpack Dev Server обеспечивает горячую перезагрузку: изменения в JavaScript-файлах автоматически отражаются в браузере.

Удаление предупреждений о режиме production

Для удаления предупреждений добавьте флаг —mode development в скрипт start:dev:

"start:dev": "webpack-dev-server --mode development"

Перезапустите сервер.

Опция inline

Опция inline управляет обновлением браузера. По умолчанию (inline: true) обновление автоматическое. inline: false ("start:dev": "webpack-dev-server —inline false —mode development") — обновление вручную.

Webpack Dev Server упрощает разработку, предоставляя горячую перезагрузку и автоматическую сборку. Для запуска без конфигурации разместите index.js в src, настройте ссылку на main.js в index.html и добавьте скрипты в package.json.

Что будем искать? Например,программа