This is an old revision of the document!
Table of Contents
Webpack
Официальный сайт webpack https://webpack.js.org
Webpack это сборщик модулей, который умеет сам анализировать модули и файлы, которые используются на проекте.
Используется для более сложных приложений.
Зачем нужен вебпак?
Вебпак — это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один или более бандл (bundle), на который может ссылаться файл «index.html».
App.js -> | Dashboard.js -> | Bundler | -> bundle.js About.js -> |
Какие проблемы решает вебпак?
Обычно, при создании приложения на JavaScript, код разделяется на несколько частей (модулей). Затем в файле «index.html» необходимо указать ссылку на каждый скрипт.
<body>
...
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="libs/react.min.js"></script>
<script src='src/admin.js'></script>
<script src='src/dashboard.js'></script>
<script src='src/api.js'></script>
<script src='src/auth.js'></script>
<script src='src/rickastley.js'></script>
</body>
Это не только утомительно, но и подвержено ошибкам. Важно не только не забыть про какой-нибудь скрипт, но и расположить их в правильном порядке. Если загрузить скрипт, зависящий от React, до загрузки самого React, приложение сломается. Вебпак решает эти задачи. Не нужно беспокоиться о последовательном включении всех скриптов.
<body>
...
<script src='dist/bundle.js'></script>
</body>
Как мы скоро узнаем, сбор модулей является лишь одним из аспектов работы вебпака. При необходимости можно заставить вебпак осуществить некоторые преобразования модулей перед их добавлением в бандл. Например, преобразование SASS/LESS в обычный CSS, или современного JavaScript в ES5 для старых браузеров.
Установка вебпака
После инициализации проекта с помощью npm, для работы вебпака нужно установить два пакета — webpack и webpack-cli.
npm i webpack webpack-cli -D
webpack.config.js
После установки указанных пакетов, вебпак нужно настроить. Для этого создается файл webpack.config.js, который экспортирует объект. Этот объект содержит настройки вебпака.
module.exports = {}
Основной задачей вебпака является анализ модулей, их опциональное преобразование и интеллектуальное объединение в один или более бандл, поэтому вебпаку нужно знать три вещи:
- Точка входа приложения
- Преобразования, которые необходимо выполнить
- Место, в которое следует поместить сформированный бандл