====== Webpack ====== Официальный сайт webpack [[https://webpack.js.org]] Презентация Webpack {{:webpack.pptx}} {{:74de6adc11.jpg?600|}} ===== Зачем нужен вебпак? ===== Вебпак — это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один или более бандл (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 = {} Основной задачей вебпака является анализ модулей, их опциональное преобразование и интеллектуальное объединение в один или более бандл, поэтому вебпаку нужно знать три вещи: - Точка входа приложения - Преобразования, которые необходимо выполнить - Место, в которое следует поместить сформированный бандл ===== Настройка ===== ==== Точка входа ==== Сколько бы модулей не содержало приложение, всегда имеется единственная точка входа. Этот модуль включает в себя остальные. Обычно, таким файлом является 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. Мы хотим не только импортировать такие файлы, но и поместить их в тег