HtmlWebpackPlugin

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

Установка

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

Основное использование

Плагин сгенерирует для вас HTML5-файл, который включает все ваши веб-пакеты webpack в теле, используя script теги. Просто добавьте плагин в свою конфигурацию webpack следующим образом:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

Это сгенерирует файл dist/index.html содержащий следующее:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

Если у вас несколько точек входа в webpack, они все будут включены с <script> тегами в сгенерированном HTML.

Если у вас есть какие-либо CSS-активы в выводе webpack (например, CSS, извлеченные с помощью MiniCssExtractPlugin), то они будут включены с <link> тегами в элементе <head> сгенерированного HTML.

Конфигурация

Для всех параметров конфигурации, пожалуйста, обратитесь к документации плагина.

Плагины сторонних разработчиков

Плагин поддерживает плагины сторонних разработчиков. Список см. в документации.

© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://v4.webpack.js.org/plugins/html-webpack-plugin