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?

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

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

Установка Webpack

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

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

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

yarn global add webpack webpack-cli
npm i -g webpack webpack-cli

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

webpack-cli

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

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

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

yarn add webpack webpack-cli -D
npm i webpack webpack-cli —save-dev

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

<
//.
«scripts»: <
«build»: «webpack»
>
>

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

yarn build

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

Настройка Webpack

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

Webpack за 2 минуты

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

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

Точка входа

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

module.exports = /*. */
entry: ‘./index.js’
/*. */
>

Вывод (output)

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

module.exports = /*. */
output: path: path.resolve(__dirname, ‘dist’),
filename: ‘app.js’
>
/*. */
>

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

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

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

import ‘style.css’

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

module.exports = /*. */
module: rules: [
< test: /.css$/, use: ‘css-loader’ >,
>]
>
/*. */
>

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

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

module.exports = /*. */
module: rules: [
test: /.css$/,
use: [
loader: ‘css-loader’,
options: modules: true
>
>
]
>
]
>
/*. */
>

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

module.exports = /*. */
module: rules: [
test: /.css$/,
use:
[
‘style-loader’,
‘css-loader’,
]
>
]
>
/*. */
>

В этом примере css-loader интерпретирует директиву import ‘style.css’ в CSS. Затем style-loader внедряет этот CSS в DOM, используя тег .

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

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

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

Что такое webpack

Webpack — инструмент для сборки проекта перед деплоем, то есть загрузкой на хостинг.

Что понимается под сборкой? Представьте, что вы работаете над проектом, в котором 50 CSS и JavaScript-файлов. Если вы их вручную подключите в HTML с помощью тегов
и Webpack автоматизирует эту работу — он разбивает файлы на пакеты и подключает на страницы, а мы с его помощью собираем проект.

Ещё он помогает оптимизировать приложение: сжимает картинки, шрифты и видео, минимизирует код — но для этого нужно установить дополнительные npm-пакеты. Также с помощью сборщика настраивается локальный сервер и запускаются приложения в браузере без заливки на хостинг. Есть и другие сборщики: rollup, esbuild, vite или parsel. Но, как показывает статистика npm, они не такие популярные.

Webpack используется в большинстве проектов, а также в основе уже готовых сборок — бойлерплейтов. Причина такой популярности — webpack стабильный и гибкий. Если вы разберётесь с его настройками, то сможете менять конфигурацию под любой проект.

Что даёт webpack

Webpack позволяет импортировать и экспортировать переменные и функции. Вот, например, вы пишете JS-код в 1–2 файлах, и в результате получается простыня, в которой сложно ориентироваться и вам, и вашим коллегам. С webpack код делится на ECMAScript-модули. В одном будут утилиты, в другом — функции для работы фильтров, в третьем — код для форм.

Если какие-то переменные или функции нужны в нескольких модулях, вы экспортируете из одного файла и импортируете в другой. В конце все основные функции импортируются в одном главном файле, например main.js.

// файл index.js import from ‘./sum.js’; // когда мы указываем ключевое слово export в файле sum.js, нам становится доступен import. Обратите внимание на синтаксис — постановку фигурных скобок sum(1, 2);

// файл sum.js export const sum = (a, b) => a + b; // Синтаксис ES6 — стрелочная функция, возвращающая результат суммирования двух чисел

// файл index.js import sum from ‘./sum.js’; // import (принимает любое имя, но в большинстве случает даётся по названию функции или её содержанию) и путь // в современных редакторах кода путь к импортируемой функции подставляется автоматически sum(3, 4);

// файл sum.js export default function sum(a, b) < // Стандартная функция, возвращающая результат сложения двух чисел return a + b; >// функция перед объявлением имеет два ключевых слова: export и default — это позволяет использовать её в других файлах проекта

// файл index.js import Sum from ‘./path/to/file.js’; // путь к файлу (классы вызываются и записываются с большой буквы) const calc = new Sum(5, 6); // вызов инстанса класса, куда будут записаны переменные calc.result() // вывод результата суммирования двух значений

// файл sum.js class Sum < // Класс sum, принимающий в качестве значений две переменные — a и b constructor(a, b)

result() < // метод, суммирующий значения и возвращающий результат return this.a + this.b; >>

export ; // export может проставляться как в начале класса (функции), так и после

Пример использования import и export: Сборщик тесно связан с Node.js — он позволяет разработчикам управлять файловой системой компьютера. Например, при сборке webpack создаёт директорию dist и собирает в ней файлы с кодом. Чистый JS в браузерной среде на такое не способен. Ещё webpack заменяет плагины Live Server и Live Sass Compiler — серверы для разработки и преобразования препроцессоров SASS, Less и SCSS в чистый CSS. Вы также можете использовать в проекте TypeScript — при правильной настройке webpack за вас преобразует все файлы в JS-код.

Зачем использовать webpack

• Чтобы повысить производительность приложения из-за объединения модулей в один файл.
• Чтобы оптимизировать код, разбивая его на отдельные модули и компоненты.
• Чтобы сократить время на разработку, сборку и тестирование проекта.

⭐ Изучить все возможности Webpack и научиться использовать его в своих проектах вы можете на специализированном курсе.

Больше статей об инструментах

• Линтер ESLint
• Chrome DevTools
• Дополнения VS Code
• Как выбирать npm-пакеты
• Ещё 34 программы для фронтендеров

Источник: htmlacademy.ru

Webpack: руководство для начинающих

Представляю вашему вниманию перевод статьи «Webpack: A gentle introduction» автора Tyler McGinnis.

Перед изучением новой технологии задайте себе два вопроса:

1. Зачем нужен этот инструмент?
2. Какие задачи он выполняет?

Зачем нужен вебпак?

Вебпак — это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один или более бандл (bundle), на который может ссылаться файл «index.html».

App.js -> | Dashboard.js -> | Bundler | -> bundle.js About.js -> |

Какие проблемы решает вебпак?

Обычно, при создании приложения на JavaScript, код разделяется на несколько частей (модулей). Затем в файле «index.html» необходимо указать ссылку на каждый скрипт.

Это не только утомительно, но и подвержено ошибкам. Важно не только не забыть про какой-нибудь скрипт, но и расположить их в правильном порядке. Если загрузить скрипт, зависящий от React, до загрузки самого React, приложение сломается. Вебпак решает эти задачи. Не нужно беспокоиться о последовательном включении всех скриптов.

Как мы скоро узнаем, сбор модулей является лишь одним из аспектов работы вебпака. При необходимости можно заставить вебпак осуществить некоторые преобразования модулей перед их добавлением в бандл. Например, преобразование SASS/LESS в обычный CSS, или современного JavaScript в ES5 для старых браузеров.

Установка вебпака

После инициализации проекта с помощью npm, для работы вебпака нужно установить два пакета — webpack и webpack-cli .

npm i webpack webpack-cli -D

webpack.config.js

После установки указанных пакетов, вебпак нужно настроить. Для этого создается файл webpack.config.js , который экспортирует объект. Этот объект содержит настройки вебпака.

module.exports = <>

Основной задачей вебпака является анализ модулей, их опциональное преобразование и интеллектуальное объединение в один или более бандл, поэтому вебпаку нужно знать три вещи:

1. Точка входа приложения
2. Преобразования, которые необходимо выполнить
3. Место, в которое следует поместить сформированный бандл

Точка входа

Сколько бы модулей не содержало приложение, всегда имеется единственная точка входа. Этот модуль включает в себя остальные. Обычно, таким файлом является index.js. Это может выглядеть так:

index.js imports about.js imports dashboard.js imports graph.js imports auth.js imports api.js

Если мы сообщим вебпаку путь до этого файла, он использует его для создания графа зависимостей приложения. Для этого необходимо добавить свойство entry в настройки вебпака со значением пути к главному файлу:

module.exports = < entry: ‘./app/index.js’ >

Преобразования с помощью лоадеров (loaders)

После добавления точки входа, нужно сообщить вебпаку о преобразованиях, которые необходимо выполнить перед генерацией бандла. Для этого используются лоадеры.

По умолчанию при создании графика зависимостей на основе операторов import / require() вебпак способен обрабатывать только JavaScript и JSON-файлы.

import auth from ‘./api/auth’ // import config from ‘./utils/config.json’ // import ‘./styles.css’ // ️ import logo from ‘./assets/logo.svg’ // ️

Едва ли в своем приложении вы решитесь ограничиться JS и JSON-файлами, скорее всего, вам также потребуются стили, SVG, изображения и т.д. Вот где нужны лоадеры. Основной задачей лоадеров, как следует из их названия, является предоставление вебпаку возможности работать не только с JS и JSON-файлами.

Первым делом нужно установить лоадер. Поскольку мы хотим загружать SVG, с помощью npm устанавливаем svg-loader.

npm i svg-inline-loader -D

Далее добавляем его в настройки вебпака. Все лоадеры включаются в массив объектов module.rules :

module.exports = < entry: ‘./app/index.js’, module: < rules: [] >>

Информация о лоадере состоит из двух частей. Первая — тип обрабатываемых файлов ( .svg в нашем случае). Вторая — лоадер, используемый для обработки данного типа файлов ( svg-inline-loader в нашем случае).

module.exports = < entry: ‘./app/index.js’, module: < rules: [ < test: /.svg$/, use: ‘svg-inline-loader’ >] > >

Теперь мы можем импортировать SVG-файлы. Но что насчет наших CSS-файлов? Для стилей используется css-loader .

npm i css-loader -D
module.exports = < entry: ‘./app/index.js’, module: < rules: [ < test: /.svg$/, use: ‘svg-inline-loader’ >, < test: /.css$/, use: ‘css-loader’ >] > >

Теперь мы можем импортировать как SVG, так и CSS-файлы. Однако для того, чтобы наши стили работали корректно, нужно добавить еще один лоадер. Благодаря css-loader мы можем импортировать CSS-файлы.

Но это не означает, что они будут включены в DOM. Мы хотим не только импортировать такие файлы, но и поместить их в тег , чтобы они применялись к элементам DOM. Для этого нужен style-loader .

npm i style-loader -D
module.exports = < entry: ‘./app/index.js’, module: < rules: [ < test: /.svg$/, use: ‘svg-inline-loader’ >, < test: /.css$/, use: [ ‘style-loader’, ‘css-loader’ ] >] > >

Обратите внимание, что поскольку для обработки CSS-файлов используется два лоадера, значением свойства use является массив. Также обратите внимание на порядок следования лоадеров, сначала style-loader , затем css-loader . Это важно.

Вебпак будет применять их в обратном порядке. Сначала он использует css-loader для импорта ‘./styles.css’ , затем style-loader для внедрения стилей в DOM.

Лоадеры могут использоваться не только для импорта файлов, но и для их преобразования. Самым популярным является преобразование JavaScript следующего поколения в современный JavaScript с помощью Babel. Для этого используется babel-loader .

npm i babel-loader -D
module.exports = < entry: ‘./app/index.js’, module: < rules: [ < test: /.svg$/, use: ‘svg-inline-loader’ >, < test: /.css$/, use: [ ‘style-loader’, ‘css-loader’ ] >, < test: /.(js)$/, use: ‘babel-loader’ >] > >

Существуют лоадеры почти для любого типа файлов.

Точка выхода

Теперь вебпак знает о точке входа и лоадерах. Следующим шагом является указание директории для бандла. Для этого нужно добавить свойство output в настройки вебпака.

const path = require(‘path’) module.exports = < entry: ‘./app/index.js’, module: < rules: [ < test: /.svg$/, use: ‘svg-inline-loader’ >, < test: /.css$/, use: [ ‘style-loader’, ‘css-loader’ ] >, < test: /.(js)$/, use: ‘babel-loader’ >] >, output: < path: path.resolve(__dirname, ‘dist’), filename: ‘index_bundle.js’ >>

Весь процесс выглядит примерно так:

1. Вебпак получает точку входа, находящуюся в ./app/index.js
2. Он анализирует операторы import / require и создает граф зависимостей
3. Вебпак начинает собирать бандл, преобразовывая код с помощью соответствующих лоадеров
4. Он собирает бандл и помещает его в dist/index_bundle.js

Плагины (plugins)