Создание конфигурационного файла Webpack
Установленый сборщик должен быть настроен. Это делается в специальном конфигурционном файле webpack.config.js, размещаемым в корне сайта.
Для начала нам нужна одна настройка entry, которая задает точку входа. Также нам нужна настройка mode, задающая режим сборки. Итак, создадим файл настроек со следующим содержимым:
webpack.config.jsexport default {
mode: 'development',
entry: './src/index.js',
};
Сейчас в файле package.json у вас должны быть включены модули:
package.json{
"type" : "module"
}
Давайте разместим в этом файле еще и настройку scripts для удобного запуска Webpack:
package.json{
"type" : "module",
"scripts" : {
"build" : "webpack"
}
}
После этого наш сборщик можно будет вызвать следующей командой:
npm run buildДавайте сделаем тестовую сборку. Для этого сделаем тестовый файл с точкой входа:
/src/index.jsalert('it works');
В терминале, находясь в корневой папке вашего сайта, выполните сборку:
npm run buildВ результате в папке dist должен появиться файл main.js, содержащий сборку. Такое имя бандлу Webpack дает по умолчанию, так как мы не указали свое имя.
Запуск из коробки
Для запуска Webpack с нужными опциями используется командная строка. Достаточно указать режим работы через флаг --mode:
webpack --mode development
webpack --mode production
webpack --mode noneПодключение бандла
Для того, чтобы можно было запускать собранный код, его нужно подключить к верстке. Для этого в папке dist сделаем следующий файл:
/dist/index.html<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script defer src="main.js"></script>
</head>
<body>
text
</body>
</html>