Настроить вебпакет

Настроить веб-пакет

Следующим шагом будет создание файла webpack.config.js. Там мы опишем настройки, чтобы веб-пакет выполнял ту работу, которую мы хотим.

Первое, с чего начинается конфигурация веб-пакета, — это Entry. Это также описано на официальном сайте webpack: https://webpack.js.org/concepts/.

Вход

Здесь мы опишем, где должен начинаться веб-пакет при обработке нашего кода..

Однако, чтобы описать путь к файлам из src / jsisrc / scss, мы должны сначала загрузить другой модуль: path.

Введите в консоли npm install path —save-dev..

Теперь мы можем добавить в webpack.config.js следующий контент:

const path = require (‘путь’);
module.exports = {запись: [путь.resolve (‘./ src / js / functions.js’), path.resolve (‘./ src / scss / style.scss’)]};

module.exports — это синтаксис из ESNext, который делает описанные настройки общедоступными при загрузке из внешнего файла. Сейчас мы не будем вдаваться в подробности, что это означает, а оставим тему для будущего урока..

Ventry мы предоставляем массив путей к стартовым пакетам для webpack. У нас есть 2 — для JS и SCSS, которые мы хотим перенести.

Читать также:  Шоу прокрутки (Часть 1 HTML + CSS)

Выход

Следующим шагом в настройке веб-пакета является вывод. Здесь мы описываем, где именно сохранять новые файлы после перевода исходных..

Давайте изменим содержимое webpack.config.js на:

const path = require (‘путь’);
module.exports = {запись: [path.resolve (‘./ src / js / functions.js’), path.resolve (‘./ src / scss / style.scss’)], вывод: {путь: путь. resolve (__ dirname, ‘dist’), filename: ‘functions.bundle.js’}};

В разделе «Вывод» мы описываем папку и имя только связанного JS-файла. Мы установим имя файла CSS позже, когда загрузим плагин для обработки SCSS. Webpack не имеет встроенной поддержки SCSS, только для связывания JS.

Запуск веб-пакета

Чтобы веб-пакет переводил наш код, нам нужно вызвать команду. Однако сначала его нужно описать в нашем файле package.json..

На данный момент у вас наверняка есть:

"scripts": {"test": "echo \" Ошибка: не указан тест \ "exit 1"}

Читать также:  Начало работы в PHP

Удалите этот «тест» и добавьте:

"scripts": {"dev": "webpack —mode = development"}

scriptsotpackage.json запускается через: npm run имя_сценария. Где имя_сценария (без угловых скобок) — это имя сценария, который вы определили в packkage.json. Там у вас может быть несколько определенных скриптов.

Это означает, что в данный момент npm run dev будет запускать ваш webpack —mode = development в контексте Node.JS и вашего проекта..

Почему бы не написать напрямую webpack —mode = development в консоли, anpm run dev?

Ключевым моментом в предыдущем объяснении является «в контексте Node.JS и его проекта». Если у вас не установлен веб-пакет глобально, а только как dev-зависимость в проекте, вы получите сообщение об ошибке, если попытаетесь запустить команду веб-пакета непосредственно через консоль..

Однако, если у вас есть глобально установленный веб-пакет — это сработает..

Остальная часть команды: — mode = development указывает веб-пакету, что мы в настоящее время находимся в среде разработки, а не на конечном сервере, который предоставляет различную информацию для подключаемых модулей веб-пакета, которые мы установим позже. В зависимости от среды мы можем или не можем минимизировать наш JS-код..

Читать также:  Что такое параллакс

npm запустить dev

Запустите его, и вы, вероятно, увидите сообщение о том, что для работы webpack необходимо установить модуль webpack..

В качестве ответа просто наберите «да» в консоли и нажмите «Enter». Это добавит щелчок по веб-пакету к зависимостям разработчиков.

В результате вы должны увидеть только что созданный файл с именем functions.bundle.js в папке dist. Однако, если вы введете какой-либо код в style.scss, вы получите сообщение об ошибке, которое веб-пакет не может прочитать. Это связано с тем, что я упоминал ранее, что нам понадобится модуль SCSS..

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?