Webpack как подключить js файл

Обновлено: 09.01.2025

Как ни странно, детально разобраться с вебпаком я захотел именно для того, чтобы использовать в своих проектах CSS-пропроцессоры. Даже когда появился Gutenberg, я в это решил не вникать и создавал блоки для него на чистом JS 😁

В этом уроке постараюсь рассказать всё пошагово и очень легко, для тех, кто никогда не работал ни с чем из этого, но очень хочет. Начнём с настройки Node.js, потом перейдём к установке Webpack, и только потом уже установим необходимые для работы с SCSS препроцессором модули, также настроим минификацию.

Как я уже сказал, не очень много с этим работаю, поэтому жду ваших уточнений в комментариях (если будут).

1. Node.js

1.1 Установка

Проверяем, что всё установилось, для этого открываем Терминал (у меня Mac OS) и попробуем прочекать версию node.js: node -v

1.2 Инициализируем проект

Для этого открываем терминал в папке с проектом (это лучше сделать через текстовый редактор, который вы используете, я например установил пакет для Atom для работы с терминалом и всё) и запускаем там npm init , после чего будут появляться различные вопросы, например как назвать ваш проект, какая у него версия и т.д

package name – название проекта (по умолчнию – название папки проекта),
version – версия (по умолчанию 1.0.0),
description – описание проекта,
entry point – типо основной файл вашего npm-проекта, который и будет запускаться при его сборке, это нам пока не понадобится, можно оставить значение по умолчанию (по умолчанию index.js),
test command – команда, которая будет происходить при запуске npm run test , оставляем значение по умолчанию,
git repository и keywords не понадобится,
author – легко, имя автора,
license – лицензия, (по умолчанию ISC),

Не беспокойтесь, любую из этих настройек вы сможете вручную поменять в файле package.json , который создастся после запуска npm init .

2. Установка Webpack

2.1 Установка

Тут возможно кто-то захочет использовать, либо уже использует Gulp, насколько я понимаю, большой разницы там нет, но я решил использовать webpack, потому что когда мы находим кастомные блоки для Gutenberg, они все на webpack.

Для установки webpack для проекта, там же, в терминале запускаем npm install webpack -D . Ключ -D означает, что webpack нам нужен только при разработке, но не нужен в рабочей версии проекта.

После выполнения команды запустится установка, после установки произойдёт вот что:

В файле package.json в devDependencies появится "webpack": "^версия" ,
В проекте с темой появится папка node_modules , там будут лежать файлы модуля вебпак. Когда потом будете переносить ваш плагин/тему на живой сайт, очень прошу, не переносите эту папку!! 🤦‍♂️

После установки также откройте файл package.json и добавьте в параметр scripts следующее:

Когда в консоли будете писать npm run build – у вас будет запускаться сборка проекта.
Если напишете npm run start – webpack начнём мониторить изменения файлов и осуществлять сборку после сохранения.

2.2 Конфигурация webpack.config.js

Ещё один конфигурационный файл, который нам понадобиться создать самим. Начнём с такого шаблона в содержимом файла.

Напоминаю, что наша цель вебпака в этом уроке – чтобы он собирал нам скрипты в scripts.js , и файл style.css из файлов sass. Т е есть файлы на входе и на выходе. И в webpack.config.js мы как раз это и прописываем.

entry (строка 4) – ничего общего с index.js из шага 1.2. Это входной JS файл, в который будут подключаться все остальные, он находится в папке src . Тут ничего придумывать не нужно – всё стандартно.
output (строка 5) – то, где создавать файл результата выполнения сборки. У меня это assets/script.js , но стандартно обычно для этого используется директория dist .

В принципе можете создать все необходимые директории и файлы, а также index.php (у нас же тема WordPress) и подключить в неё файл scripts.js

2.3 Проверяем, что на этом этапе webpack работает

Суть проверки будет заключаться в том, что я создам два JS файла с каким-то изишным кодом, подключу их в index.js , запущу вебпак и проверю, что произойдёт на сайте.

Итак, я создаю два файла test.js и test_1.js , которые располагаются в папке /src/js . В каждый из них я запишу по одной строчке кода, например console.log( 'какой-то текст' ) .

Затем в файле index.js я их подключаю следующим образом:

Если проводить параллель с темой или плагином WordPress, то я бы использовал сборку непосредственно для той части кода, в которой я планирую работать с Gutenberg, React. Собирать лёгкий jQuery-код для самого сайта нет смысла. Про настройку JSX я наверное ещё напишу отдельно.

3. SASS/SCSS

3.1 Как это будет

Сначала давайте немного наглядности, чтобы вам было понятно. Точно так же, как и с JS файлами, давайте проделаем следующее:

1. Создаем директорию /src/scss и добавим в неё файл main.scss ,
2. Одна из фишек препроцессоров – переменные, поэтому содержимое файла закинем такое:

3. Подключим наш файл main.scss там же – в index.js – import './scss/main.scss'; ,
4. Файл style.css в папке с темой у нас уже создан

Конечно сборку сейчас запускать не надо, у вас ничего не будет работать, я ведь хотел показать вам лишь общую картину.

Про синтаксис SASS особо никаких ссылок приводить не буду, потому что там всё очень легко и вы сможете загуглить. Ну хорошо, хорошо, мне нравится эта дока.

3.1 Установка

Устанавливаем это: npm i css-loader sass-loader node-sass mini-css-extract-plugin -D (если вы не догадались, npm i это тот же npm install

для извлечения CSS в отдельные файлы, для компиляции SCSS в CSS.

3.2 Настройка webpack.config.js

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

3.3 Минификация CSS

Устанавливаем плагин optimize-css-assets-webpack-plugin npm i optimize-css-assets-webpack-plugin -D
Подключаем его в webpack.config.js в начале файла const minify = require('optimize-css-assets-webpack-plugin');
Добавляем это:

В итоге файл webpack.config.js будет выглядеть так:

Ничего не произошло при сборке? А вы поменяли в webpack.config.js параметр mode с development на production ? 🙃

Продолжение про настройку Babel вы можете найти в этом уроке.

Видеоурок

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!

Если вы раньше использовали вебпак 4, вот некоторые отличия от 5 версии:

команда «webpack-dev-server» теперь выглядит как «webpack-serve»
отдельная установка file-loader, raw-loader и url-loader больше не требуется, вы можете использовать встроенные загрузчики ресурсов (asset modules)
полифилы для Node.js больше не поддерживаются, поэтому если, например, вы получили ошибку для stream, необходимо добавить пакет «stream-browserify» в качестве зависимости и < stream: «stream-browserify» >в качестве алиаса в настройки вебпака

Что такое вебпак?

По большей части, сайты больше не пишутся на чистом HTML с небольшим количеством JavaScript — часто они создаются только с помощью JavaScript. Поэтому возникает необходимость в сборке, минификации и транспиляции кода. Вот где вебпак приходит на помощь.

Вебпак — это сборщик модулей. Он служит для упаковки кода для использования браузером. Он позволяет использовать последние возможности JavaScript с помощью Babel или использовать TypeScript и компилировать его в кроссбраузерный минифицированный код. Он также позволяет импортировать статические ресурсы в JavaScript.

Для разработчиков вебпак также предоставляет сервер для разработки, который умеет обновлять модули и стили на лету при сохранении файла. Инструменты командной строки, такие как «vue create» и «react-create-app» используют вебпак за сценой, но вы легко можете создать собственную настройку вебпака для указанных фреймворков.

Вебпак также умеет делать много других вещей, но данная статья посвящена основам его настройки и использования.

Установка

Создаем директорию проекта и инициализируем его:

Устанавливаем webpack и webpack-cli в качестве зависимостей для разработки:

— сборщик модулей и ресурсов — интерфейс командной строки для вебпака

Отлично, у нас имеется Node.js-проект с установленными основными пакетами и файл «index.js». Займемся настройкой вебпака.

Базовая настройка

Приступим к настройке сборщика. Создаем файл «webpack.config.js» в корневой директории проекта.

Точка входа

Прежде всего, необходимо определить точку входа приложения, т.е. то, какие файлы вебпак будет компилировать. В приведенном примере мы определяем точку входа как «src/index.js»:

Точка выхода

Точка выхода — это директория, в которую помещаются скомпилированные вебпаком файлы. Установим точку выхода как «dist». Префикс "[name]" соответствует названию файла в src:

Минимальная настройка для сборки проекта готова. Добавляем скрипт «build» в файл «package.json», запускающий команду «webpack»:

В директории «dist» создается файл «index.bundle.js». Файл не изменился, но мы успешно осуществили сборку проекта.

Плагины

Интерфейс плагинов делает вебпак очень гибким. Плагины используются как самим вебпаком, так и сторонними расширениями. Некоторые плагины используются почти в каждом проекте.

Плагин создания HTML на основе шаблона

У нас есть готовая сборка, но она бесполезна без разметки, которая загрузит сборку в качестве скрипта. Поскольку мы хотим, чтобы такой HTML-файл генерировался автоматически, используем html-webpack-plugin.

Создаем файл «template.html» в директории «src». Мы можем добавить в шаблон переменные и другую информацию. Добавим переменную «title», в остальном шаблон будет выглядеть как обычный HTML-файл с контейнером с идентификатором «root»:

Добавляем в настройки вебпака свойство «plugins», где определяем плагин, название выходного файла (index.html) и шаблон:

Добавим немного контента в DOM. Изменим содержимое файла «index.js» и перезапустим сборку.

В открывшейся вкладке браузера вы должны увидеть заголовок, гласящий «Как интересно!». Также обратите внимание на уменьшение размера файла.

Очистка

Установим clean-webpack-plugin, очищающий директорию «dist» при каждой сборке проекта. Это позволяет автоматически удалять старые файлы, ставшие ненужными.

Модули и загрузчики

Вебпак использует загрузчики для разбора файлов, загружаемых с помощью модулей. Это могут быть JavaScript-файлы, статические ресурсы, такие как изображения или стили и компиляторы, такие как TypeScript и Babel. Вебпак 5 имеет несколько встроенных загрузчиков ресурсов.

В нашем проекте имеется HTML-файл, который загружает некоторый скрипт, но больше он ничего не делает. Давайте подумаем, чего мы хотим от сборщика?

Компиляция новейших возможностей JavaScript в код, совместимый со всеми или большинством браузеров
Импорт стилей и преобразование SCSS в CSS
Импорт изображений и шрифтов
Настройка React или Vue (опционально)

Babel (JavaScript)

Babel — это инструмент, позволящий использовать будущий JavaScript сегодня.

Мы собираемся определить правило, согласно которому все файлы с расширением «js» в проекте (кроме файлов, содержащихся в директории «node_modules») будут транспилироваться с помощью babel-loader. Для работы Babel требуется несколько зависимостей:

— транспиляция файлов с помощью Babel и вебпака — транспиляция ES2015+ в обратно совместимый JavaScript — полезные стандартные настройки Babel — пример кастомной конфигурации Babel (установка свойств экземпляров в теле класса, а не в его конструкторе)

Если вы настраиваете TypeScript-проект, то вместо babel-loader следует использовать typescript-loader для всех JavaScript-файлов, нуждающихся в транспиляции. Вы проверяете файлы с расширением «ts» и используете ts-loader.

Итак, Babel настроен, но плагин еще нет. Вы можете убедиться в этом, добавив следующий код в начало index.js:

Запускаем сборку с помощью yarn build. Теперь все работает.

Изображения

Мы хотим импортировать изображения в JavaScript-файл, но JavaScript не умеет этого делать. Чтобы убедиться в этом, создаем директорию «src/images», помещаем туда изображение и пытаемся импортировать его в файле «index.js»:

При запуске сборки будет выброшено исключение:

Как отмечалось ранее, вебпак обладает некоторыми встроенными загрузчиками для работы со статическими файлами. Для изображений следует использовать тип «asset/resource». Обратите внимание, что речь идет именно о типе (type), а не о загрузчике (loader):

В директории «dist» появляется новый файл.

Шрифты и другие встраиваемые данные

Вебпак также имеет встроенный модуль для обработки некоторых встраеваемых данных, таких как шрифты и SVG. Для этого достаточно указать тип «asset/inline»:

Стили

Использование загрузчиков стилей является необходимым условием использования строк наподобие «import 'file.css'» в скрипте.

Многие люди используют CSS-in-JS, стилизованные компоненты (styled components) и другие инструменты, позволяющие использовать стили в JavaScript.

Порой мы можем ограничиться загрузкой одного CSS-файла. Но, возможно, вы хотите использовать PostCSS, позволяющий использовать последние возможности CSS в браузере. Или вы хотите использовать препроцессор Sass.

Я хочу использовать все три — писать код на Sass, обрабатывать его с помощью PostCSS и компилировать в CSS.

— загружает SCSS и компилирует его в CSS — Node Sass — обработка CSS с помощью PostCSS — полезные настройки PostCSS — загрузка стилей — применение стилей к элементам DOM

Как и для Babel, для PostCSS требуется отдельный файл настроек:

Для проверки работоспособности названных инструментов создадим файл «src/styles/main.scss», содержащий переменные Sass и пример использования PostCSS (lch):

Импортируем этот файл в index.js и добавляем 4 загрузчика. Загрузчики используются вебпаком справа налево, так что последним должен быть sass-loader, затем PostCSS, затем CSS и, наконец, style-loader, который применяет скомпилированные стили к элементам DOM:

После сборки вы заметите, что Sass и PostCSS применились к DOM.

Обратите внимание, что мы установили настройки для режима разработки. Для продакшна следует использовать MiniCssExtractPlugin вместо style-loader, который экспортирует минифицированный CSS.

Разработка

Каждый раз набирать команду yarn build (npm run build) при необходимости повторной сборки проекта может быть утомительным. Чем больше проект, тем дольше он будет собираться. Поэтому необходимо иметь два файла настроек вебпака:

Настройки для продакшна, включающие минификацию, оптимизацию и удаление всех карт ресурсов (source maps)
Настройки для разработки, включая запуск сервера, обновление при каждом изменении и карты ресурсов

Для этого необходимо установить webpack-dev-server.

В целях демонстрации принципов использования сервера для разработки мы можем определить соответствующие настройки в файле «webpack.config.js». На практике лучше иметь два файла настроек: один с mode: production и другой с mode: development. В специально подготовленной для вас webpack 5 boilerplate я использую webpack-merge для получения базовых настроек в виде одного файла, а специальные требования содержатся в файлах «webpack.prod.js» и «webpack.dev.js».

Мы добавили mode: development и свойство «devServer». В данном свойстве содержится несколько стандартных настроек — номер порта (8080), автоматическое открытие браузера, использование hot-module-replacement, для которого нужен webpack.HotModuleReplacement(). Это позволит модулям обновляться без полной перезагрузки страницы, т.е. если изменятся отдельные стили, только они будут обновлены, вам не потребуется перезагружать JavaScript, что очень сильно ускоряет разработку.

Для запуска сервера используется команда «webpack serve»:

После запуска этой команды браузер откроется по адресу localhost:8080. Теперь вы можете изменять Sass и JavaScript и они будут обновляться на лету.

Существует несколько путей подключения сторонних js/css библиотек при помощи средств Webpack. Не все js модули совместимы и могут напрямую использоваться с Webpack. На этот случай Webpack имеет несколько загрузчиков, для работы с такими модулями. Далее рассмотрим большинство из них.

1. ProvidePlugin для введения неявных глобальных переменных

Пожалуй один из самых простых и популярных методов - это ProvidePlugin. ProviderPlugin встроен в Webpack и не требует устновки. Множество библиотек, такие как jQuery, имеют специфические глобалы: $ или jQuery. И в каждом современном проекте мы используем портянку из импортов. Для решения этой пробемы мы можем настроить Webpack таким образом, чтобы он автоматически анализировал код и автоматически включал необходимые модуи. К примеру при появлении идентификатора $ он подставлял бы следующую строку:

При этом нужно убедиться правильно ли заданы пути до node_modules .

2. Webpack Aliases

В зависимости от того, как структурирован проект, вы можете импортировать объявления примерно так:

но каждый раз писать длинный путь это весьма некрасиво и в один момент, при изменении структуры проекта, все может поломаться. Выходом из этой ситуации является Webpack псевдонимы или alias.

после этого уже можно импортировать компоненты более коротко и надежно:

3. Использование imports-loader для конфигурации this

Устаревшие библиотеки полагаются на this будучи window объектом. Это доставляет проблемы когда она запускается в контексте CommonJS, где this равносильно module.exports . И как раз в этом случае вам поможет imports-loader .

Сначала установите пакет:

затем добавте в Webpack конфиг:

4. Использование imports-loader для отключения AMD

Импорт следующим образом поддерживает различные стили модулей, такие как AMD, CommonJS.

5. script-loader для глобального импорта библиотек

Этот прием загрузки равносилен тому, если бы вы загружали через тег <script> . Этот код будет также доступен в глобальном контексте.

Но у этого метода загрузки есть существенный недостаток - файл скрипта добавляется в бандл как строка, по этому он не минимизируется Webpack‘ом.

Для начала нужно установить сам loader:

Для загрузки данным методом рекомендуется прописать в Webpack конфиг:

а затем импортировать в модуль

А еще есть альтернативный способ, inline’ом и без добавления в конфиг:

6. noParse для импорта крупных дистрибутивов

Это способ отключает парсинг Webpack‘ом, что может значительно улучшить время сборки.

Webpack — это инструмент, позволяющий скомпилировать, например, JavaScript модули в единый JS-файл. Webpack также известен как сборщик модулей.

При большом количестве файлов он создает один объемный файл (или несколько файлов) для запуска вашего приложения.

Он также способен выполнять множество иных операций:

помогает собрать воедино ваши ресурсы
следит за изменениями и повторно выполняет задачи
может выполнить транспиляцию JavaScript следующего поколения до более старого стандарта JavaScript (ES5) с помощью Babel, что позволит использовать новейшие функции JavaScript, не беспокоясь о том, поддерживает их браузер или нет
может выполнить транспиляцию CoffeeScript в JavaScript
может конвертировать встроенные изображения в data:URI
позволяет использовать require() для CSS файлов
может запустить webpack-dev-server (в нём встроен локальный сервер и livereload (“живая перезагрузка браузера”))
может работать с Hot Module Replacement (замена горячего модуля)
может разделить выходной файл (output file) на несколько файлов, чтобы избежать медленной загрузки страницы из-за большого размера JS-файла
может выполнить Tree Shaking

Webpack не ограничивается одним лишь фронтендом, его также успешно применяют в бэкенд разработке на Node.js.

У Webpack есть предшественники, у которых он перенял многие идеи. Основное различие заключается в том, что те инструменты известны как task runners (такс-раннеры), в то время как Webpack ничто иное, как сборщик модулей.

Webpack — э т о более целенаправленный инструмент. Вам достаточно указать точку входа в ваше приложение (это может быть даже HTML-файл с тегами <script>), а webpack проанализирует файлы и объединит их в один выходной JavaScript-файл, содержащий все необходимое для запуска приложения.

Webpack может быть установлен глобально или локально для каждого проекта.

Глобальная установка

Глобальная установка с помощью Yarn:

Теперь мы можем запустить webpack:

Локальная установка

Это рекомендуемый способ установки, поскольку Webpack может обновляться каждый проект и у вас возникнет меньше проблем при использовании последних функций для одного небольшого проекта, нежели постоянное обновление всех проектов, в которых используется Webpack.

Установка с помощью Yarn:

После этого добавьте эти строчки в свой package.json файл:

Как только все будет сделано, вы можете запустить Webpack, набрав:

в корневом каталоге проекта.

По умолчанию, Webpack (начиная с 4-й версии) не требует никакой настройки, если вы соблюдаете эти правила:

точкой входа вашего приложения является ./src/index.js
вывод (output) размещается в ./dist/main.js
Webpack работает в production mode (режим производства)

Конечно, если понадобится, вы сможете настроить каждую мельчайшую деталь в Webpack. Конфигурационный файл Webpack - webpack.config.js хранится в корневой директории проекта.

Точка входа

По умолчанию, точкой входа является ./src/index.js . Нижеприведенный пример использует файл ./index.js в качестве входной точки.

Вывод (output)

По умолчанию, вывод размещается в ./dist/main.js . В нижеприведенном примере, результат работы в Webpack генерируется в файле app.js :

С помощью Webpack можно использовать оператор import или require в своем JavaScript коде для того, чтобы подключать файлы любого типа (например, CSS).

В Webpack загрузчики являются аналогами задач (tasks) в Grunt и Gulp. Они принимают содержимое файлов, а затем преобразуют его необходимым образом и включают результат преобразования в общую сборку. Например, они могут компилировать TypeScript, загружать компоненты Vue.js и многое другое.

Например, в своем коде вы можете использовать:

указав конфигурацию данного загрузчика в файле webpack.config.js :

Регулярное выражение применяет данный загрузчик только к CSS файлам.

У загрузчика есть параметры:

Для одной и той же задачи может потребоваться несколько загрузчиков:

Порядок выполнения перевернут (последнее выполняется первым).

Так сколько всего существует загрузчиков? Очень много! Здесь вы сможете найти полный список.

Самым часто используемым загрузчиком является Babel — он используется для транспиляции современного JavaScript в ES5:

Данный пример заставляет Babel предварительно обрабатывать все наши React/JSX файлы:

Здесь вы можете увидеть параметры babel-loader .

Плагины — это почти то же самое, что и загрузчики, но под стероидами. Они могут сделать то, что не могут загрузчики. Ко всему прочему, Webpack построен на системе плагинов, которые вы используете в своем файле конфигурации.

Рассмотрим следующий пример:

Плагин HTMLWebpackPlugin автоматически создает HTML-файл с уже подключенным скриптом.

Здесь доступно множество плагинов.

Еще один полезный плагин, CleanWebpackPlugin , мы можем использовать перед перегенерацией файлов, чтобы очистить нашу папку dist/ и получить аккуратный файл с конфигурацией.

Данные режимы (появившиеся в 4-й версии Webpack) настраивают среду, в которой будет работать Webpack. Режим может быть настроен на development или production (по умолчанию стоит production ).

Режим production работает медленнее, чем development , так как ему нужно создать более оптимизированный бандл. Полученный JavaScript файл меньше по размеру, поскольку многое из режима development в нем отсутствует.

Читайте также: