Этот туториал демонстрирует простоту использования сервера разработки Webpack. Создадим проект с нуля и настроим сервер без дополнительных конфигурационных файлов.
Начало работы
- Создайте папку проекта, например, my-webpack-dev-server.
- Перейдите в неё в командной строке: cd my-webpack-dev-server.
- Инициализируйте проект: npm init -y. Создастся файл package.json.
- Откройте проект в редакторе кода (например, 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.