3.1. Что такое входная точка приложения

Для начала вспомним типы данных в JS. К примитивам относят: string, number, boolean, null, undefined, bigint и symbol. Таким образом, у нас остался ещё один тип — object, который не является примитивом.

К чему всё это?

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

Входная точка

«Под капотом» webpack строит в себе график зависимостей. Каждый раз, когда один файл зависит от другого, сборщик расценивает это как зависимость. Это позволяет webpack принимать другие типы данных, не относящиеся к коду (изображения, шрифты, аудиофайлы), и в последующем представлять их в качестве зависимостей для приложения.

Когда webpack обрабатывает всё приложение, то начинает со списка модулей, определённых в файле package.json. Далее, начиная со входной точки приложения, сборщик рекурсивно строит граф зависимостей. Этот граф как раз включает все модули, необходимые для корректной работы приложения, а затем объединяет их в один или несколько файлов.

Точка входа указывает webpack-у, какие модули он должен использовать, чтобы начать построение своей внутренней логики (графика тех самых зависимостей), после чего перейти к сборке самого приложения.

По умолчанию входная точка приложения всегда является примитивом в виде строки и имеет относительный путь:

"./src/<имя файла(чаще всего main или index)>.<расширение файла (JS, TS, JSX, TSX)>"

С подключением HTML-файла так же. Чтобы содержимое страницы отображалось правильно, нужны HtmlWebpackPlugin и html-loader.

Большинство библиотек для настройки webpack подключаются при помощи синтаксиса (на примере HtmlWebpackPlugin):

const HtmlWebpackPlugin = require('html-webpack-plugin'); // само подключение

require — это встроенный скрипт для добавления в код сторонних модулей и управления ими.

При подключении плагинов имя констант составляется от названия подключаемой библиотеки — это хорошая практика именования переменных.

Любые плагины в webpack подключаются в поле plugins с помощью вызова инстанса класса через ключевое слово new. Например:

plugins: [
  new FontminPlugin( { 
    // круглые скобки — вызываем,  фигурные — прокидываем опции в формате объекта
    autodetect: true, 
    glyphs: ['\uf0c8'], 
    allowedFilesRegex: null, 
    skippedFilesRegex: null, 
  } ), 
],

Пути в вышеуказанном плагине также указываются в строчном формате:

new HtmlWebpackPlugin({
  template: 'index.html',  // шаблон (путь к HTML-файлу)
})

Html-loader нужен для подтягивания изменений в лайв-режиме. Подключается он следующим образом.

В поле module => rules мы указываем:

{
  test: /\.(html)$/i;  // формат обрабатываемого файла
  loader: ['hmtl-loader']  // используемый обработчик                             
}

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

В поле entry webpack-конфига (файл webpack.config.js) в большинстве случаев есть стандартная запись <strong>./src/index.js</strong>. Но что, если мы хотим получить две входные точки? Всё просто, в формате объекта у нас получается такая запись:

entry: {
  main: './src/index.js';   // первая входная точка
  sup: './src/main.js' // вторая входная точка
}

new HtmlWebpackPlugin({
  template: {
    main: './src/index.html',
    sup: './src/main.html'
  }
})