Как создавать шаблоны html при сборке в webpack?

от
prokoding.ru > JavaScript > Как создавать шаблоны html при сборке в webpack?

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

1. Использование плагина HtmlWebpackPlugin:
HtmlWebpackPlugin - это плагин, который генерирует HTML-файлы на основе ваших шаблонов и вставляет необходимые ресурсы (такие как стили и скрипты) автоматически.
Чтобы использовать HtmlWebpackPlugin, необходимо установить его с помощью npm:

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

После установки необходимо добавить плагин в webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // Ваша конфигурация Webpack
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      inject: 'body'
    })
  ]
};

В данном примере указывается путь к исходному HTML-шаблону (template), а также путь и имя генерируемого файла (filename). Плагин также позволяет выбрать способ вставки ресурсов (inject), например, в конец тега body.

2. Использование простого шаблонизатора, такого как Handlebars или EJS:
Webpack позволяет использовать различные шаблонизаторы, такие как Handlebars или EJS, для создания HTML-шаблонов.
Ниже приведен пример использования Handlebars:

npm install --save handlebars
npm install --save handlebars-loader

Добавьте в webpack.config.js следующий код:

module.exports = {
  // Ваша конфигурация Webpack
  module: {
    rules: [
      {
        test: /.handlebars$/,
        loader: "handlebars-loader"
      }
    ]
  }
};

Теперь вы можете создавать шаблоны HTML с расширением .handlebars и использовать их в вашем коде JavaScript:

<!-- Шаблон: src/index.handlebars -->
<!DOCTYPE html>
<html>
  <head>
    <title>Webpack Template</title>
  </head>
  <body>
    <h1>{{title}}</h1>
    <p>{{content}}</p>
  </body>
</html>

В JavaScript-коде:

var template = require('./index.handlebars');

var data = {
  title: 'My Webpack Template',
  content: 'Hello, World!'
};

document.body.innerHTML = template(data);

3. Использование своей собственной функции-генератора:
Вы также можете создать собственную функцию-генератор, которая будет генерировать HTML-шаблоны для вас. Этот подход более гибкий, но требует больше работы.
Пример функции-генератора:

function generateHTML(title, content) {
  return `
    <!DOCTYPE html>
    <html>
      <head>
        <title>${title}</title>
      </head>
      <body>
        <h1>${title}</h1>
        <p>${content}</p>
      </body>
    </html>
  `;
}

// Использование функции:
var template = generateHTML('My Webpack Template', 'Hello, World!');

document.body.innerHTML = template;

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