Webpack — Основные понятия

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

Вебпак невероятно гибок в настройке, однако, для начала вам достаточно усвоить четыре основных понятия: entry (далее, точка входа), output (далее, вывод), loaders (далее, лоадеры), и plugins (далее, плагины).

Этот документ даст общее представление об этих понятиях, при этом будут предоставлены ссылки на развернутые примеры.

Точка входа (Entry)

Webpack создает граф всех зависимостей приложения. Первый элемент графа известен как точка входа (entry point). Точка входа указывает вебпаку, откуда начинать строить граф зависимостей, чтобы узнать что нужно связывать. Вы можете указать точку входа в виде пути к файлу, запускающему Ваше приложение.

В вебпаке точки входа объявляются в свойстве entry объекта конфигурации.

Смотрите пример ниже:

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
};

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

Подробнее о точках входа

Вывод (Output)

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

webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

В приведенном примере, мы используем опции output.filename и output.path для того, чтобы указать вебпаку название нашей сборки и директорию, где сборка должна находиться.

Свойство output обладает множеством настраиваемых возможностей, но пока мы рассмотрели один из наиболее распространенных вариантов использования этой настройки.

Лоадеры (Loaders)

Цель состоит в том, чтобы все ассеты в вашем проекте преобразовывались вебпаком (хотя, это не означает, что они должны быть объединены). Вебпак рассматривает каждый файл (.css, .html, .scss, .jpg, и т.д.) как модуль. Однако, вебпак самостоятельно «понимает» только JavaScript.

Лоадеры в вебпаке преобразовывают файлы в модули, которые потом добавляются в граф зависимостей.

Грубо говоря, лоадеры нужны вебпаку для двух вещей:

  1. Определяют, какой файл каким лоадером обрабатывается (свойство test)
  2. Преобразуют эти файлы таким образом, чтобы они могли быть добавлены в граф зависимостей (и, в конечном счете, в сборку) (свойство use)

webpack.config.js

const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

Конфигурация выше содержит свойство rules для отдельного модуля с двумя обязательными свойствами test и use. Свойство rules сообщает вебпаку следующее:

«Эй, вебпак, когда будешь обрабатывать ‘.txt’ файл внутри инструкции require()/import, используй raw-loader для его преобразования перед добавлением в сборку.»

Важно запомнить, что при объявлении правил (rules) в Вашем конфиге вебпака, Вы должны определять правила в module.rules, а не в rules. Если это будет сделано неправильно, вебпак сообщит об ошибке.

Однако, есть и другие свойства лоадеров, которые мы еще не рассмотрели.

Плагины (Plugins)

В то время как лоадеры выполняют только преобразования, основанные на типе файла, плагины чаще используются для выполнения действий и пользовательских преобразований на этапе компиляции или частей вашей сборки (а также многого другого!). У вебпака очень мощная и гибко настраиваемая система плагинов.

Чтобы использовать плагин, Вам нужно просто импортировать его с помощью require() и добавить в массив плагинов (свойство plugins). Большинство плагинов настраивается через опции. Поскольку Вы можете использовать плагин несколько раз в рамках одного конфига, Вам потребуется создать несколько экземпляров плагина с помощью инструкции new [НазваниеПлагина]().

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

Множество плагинов доступны в вебпаке «из коробки». Посмотрите список плагинов для более подробной информации.

Использовать плагины в вебпаке, обычно, очень просто. Существует множество вариантов использования, которые заслуживают подробного рассмотрения.