Полный цикл в digital

Работа с HTML макетами в Webpack

Webpack умеет работать с HTML макетами. Он позволяет автоматически выполнять подключение собранных бандлов к файлу макета. Это особенно удобно, когда имя бандла содержит хеш.

Для работы с HTML макетами используется html-webpack-plugin, давайте его установим:

npm install html-webpack-plugin --save-dev

Импортируем его:

webpack.config.jsimport HtmlWebpackPlugin from 'html-webpack-plugin';

Включим его:

webpack.config.jsexport default {
  entry: './src/index.js',
  plugins: [
    new HtmlWebpackPlugin(),
  ],
};

Теперь при сборке у нас автоматически будет генерироваться файл HTML макета и в этом макете автоматически будут подключены скрипты и стили.

Давайте попробуем самый простой случай, пусть у нас есть одна точка входа:

webpack.config.jsexport default {
  entry: './src/index.js',
  plugins: [
    new HtmlWebpackPlugin(),
  ],
};

В результате после сборки наш JavaScript соберется в бандл с именем main.js и этот бандл будет подключен к автоматически созданному макету сайта:

/dist/index.html<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
    <script defer src="main.js"></script>
  </head>
  <body>
  </body>
</html>

Несколько бандлов скриптов

Если в результате сборки у нас получится несколько бандлов, то Webpack подключит каждый из них. Пусть у нас есть следующие настройки:

webpack.config.jsexport default {
  context: path.resolve("src"),
  entry: {
    test1: "./test1.js",
    test2: "./test2.js",
  },
  output: {
    filename: "[name].build.js",
    path: path.resolve("dist"),
  },
  plugins: [new HtmlWebpackPlugin()],
};

После сборки к файлу макета будут подключены оба наших бандла:

/dist/index.html<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
    <script defer src="test1.build.js"></script>
    <script defer src="test2.build.js"></script>
  </head>
  <body>
  </body>
</html>

Бандлы скриптов с хешем

Webpack автоматически будет подключать бандлы с именами, содержащими хеши. Пусть у нас есть следующие настройки:

webpack.config.jsexport default {
  context: path.resolve("src"),
  entry: {
    test1: "./test1.js",
    test2: "./test2.js",
  },
  output: {
    filename: "[name].[contenthash].js",
    path: path.resolve("dist"),
  },
  plugins: [new HtmlWebpackPlugin()],
};

После сборки к файлу макета будут подключены наши бандлы с хешами:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
    <script defer src="test1.4173b379c6d6ff439604.js"></script>
    <script defer src="test2.72be8754d7c4cb0ece00.js"></script>
  </head>
  <body>
  </body>
</html>
Заполните форму уже сегодня!
Для начала сотрудничества необходимо заполнить заявку или заказать обратный звонок. В ответ получите коммерческое предложение, которое будет содержать индивидуальную стратегию с учетом требований и поставленных задач
Работаем по будням с 9:00 до 18:00. Заявки, отправленные в выходные, обрабатываем в первый рабочий день до 12:00.
Спасибо, ваш запрос принят и будет обработан!
Эйч Маркетинг