Создание конфигурационного файла 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>