Теперь, когда мы настроили webpack для упаковки и объединения нашего js-кода в один файл -app.bundle.js, нам нужен index.html для нашего веб-приложения с тегом сценария, имеющимsrc='app.bundle.js'.

У нас есть два варианта: создать его вручную или создать автоматически с помощью «html-webpack-plugin».

Вариант 1. Создайте index.html вручную

Давайте сначала создадим файл index.html вручную. Внутри папки «dist», где webpack выводит файл app.bundle.js, добавьте файл «index.html» с требуемым тегом скрипта, как показано ниже:

Добавьте приведенный ниже код в созданный выше index.html

Если вы откроете index.html в браузере, вы увидите, что наш код javascript работает:

Вариант 2. Использование webpack-html-plugin для создания index.html

Хотя создание index.html вручную работает хорошо, было бы неплохо, если бы webpack мог автоматически создавать index.html для нас с включенным тегом <script> с его src, указывающим на наш app.bundle.js.

Webpack может сделать это за нас с помощью html-webpack-plugin. Использование этого плагина имеет некоторые дополнительные преимущества, такие как автоматическое хеширование атрибута 'src' встроенного тега <script> при каждом запуске веб-пакета, что заставляет браузер получать последнюю версию файла с сервера вместо использования кэшированного файла всякий раз, когда он имеет новый хэш.

Давайте посмотрим, как настроить плагин -
1. Сначала удалите вручную созданный index.html, который мы создали в предыдущем разделе.

2. Установите html-webpack-plugin:

$ npm install html-webpack-plugin

3. Настройте webpack.config.js для использования плагина:

В the webpack.config.js, "require" плагин и для настройки параметров плагина нам нужно добавить свойство плагинов в конфигурацию, как показано ниже:

Здесь мы добавили новый объект HtmlWebpackPlugin в массив plugins объекта webpack.config. Обратите внимание, что для параметра hash установлено значение true, что добавит уникальный хеш к src встроенного тега <script>.

4. Теперь запустите команду npm start для webpack, чтобы пересобрать пакет.

npm start

5. На этот раз мы увидим, что 'html-webpack-plugin' автоматически создал для нас index.html с включенным тегом <script>, src которого указывает на сгенерированный app.bundle.js.

Использование настраиваемого шаблона для создания index.html

Отлично, теперь у нас есть webpack, создающий index.html с помощью HtmlWebpackPlugin.

Однако, как вы заметили на скриншоте выше, index.html, созданный с помощью HtmlWebpackPlugin, очень прост, просто встраивается тег <script>. В нем отсутствует какой-либо другой HTML-контент, включая наш настраиваемый заголовок, заголовок страницы и приветственное сообщение, которые мы добавили при создании файла вручную в приведенном выше разделе. Если мы посмотрим на файл index.html, HtmlWebpackPlugin, созданный в браузере, в настоящее время, за исключением того, что наш код js работает, он будет выглядеть пустым:

Если нам нужно настраиваемое HTML-содержимое в созданном HtmlWebpackPlugin index.html, мы можем создать html-файл шаблона и указать плагину использовать его в качестве шаблона в параметрах, как показано ниже:

  1. Создайте HTML-файл шаблона - внутри нашей папки src создайте файл index.html:

2. Добавьте приведенный ниже код в src / index.html:

Обратите внимание на элементы-заполнители <%= htmlWebpackPlugin.options.title %> и <%= htmlWebpackPlugin.options.myPageHeader %>, которые есть в приведенном выше html-файле, которые мы должны установить в качестве шаблона для HtmlWebpackPlugin для создания index.html. Мы предоставим значения для этих параметров-заполнителей в параметрах конфигурации плагина webpack.config.js.

3. Теперь в файле webpack.config.js обновите конфигурацию HtmlWebpackPlugin, чтобы использовать свойство «template», как показано ниже:

Обратите внимание на новые параметры, которые мы добавили в объект конфигурации HtmlWebpackPlugin

  • template: './src/index.html' - этот параметр указывает, какой файл использовать в качестве шаблона для создаваемого index.html.
  • title: 'My Awesome application' – это настраиваемое свойство, которое мы добавили к объекту конфигурации, значение этого свойства будет использоваться для встраивания в элемент-заполнитель <%= htmlWebpackPlugin.options.title %>, который есть в нашем html-файле шаблона.
  • myPageHeader: 'Hello World' – это еще одно настраиваемое свойство, которое мы добавили в объект конфигурации, значение этого свойства будет использоваться для встраивания в элемент-заполнитель <%= htmlWebpackPlugin.options.myPageHeader %>, который есть в нашем html-файле шаблона.

3. Запустите npm start команду для webpack, чтобы пересобрать пакет.

npm start

4. На этот раз html-webpack-plugin будет использовать index.html, который мы создали в папке src в качестве шаблона, и, таким образом, сгенерированный index.html в папке 'dist' будет содержать наш пользовательский HTML в дополнение к встроенному тегу <script>.

5. Ниже показано, как index.html теперь будет выглядеть в браузере:

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

[‹ Назад: файл конфигурации Webpack ] [ Далее: режим «смотреть ›› »]