Полный цикл в digital

Создание конфигурационного файла 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>
Заполните форму уже сегодня!
Для начала сотрудничества необходимо заполнить заявку или заказать обратный звонок. В ответ получите коммерческое предложение, которое будет содержать индивидуальную стратегию с учетом требований и поставленных задач
Работаем по будням с 9:00 до 18:00. Заявки, отправленные в выходные, обрабатываем в первый рабочий день до 12:00.
Спасибо, ваш запрос принят и будет обработан!
Эйч Маркетинг