сводка использования html-webpack-plugin

Webpack
сводка использования html-webpack-plugin

html-webpack-pluginЭффект: при использованииwebpackПри упаковке создайтеhtmlфайл и поставитьwebpackУпакованные статические файлы автоматически вставляются в этотhtmlв файле.

использовать

Установить

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

Использовать конфигурацию по умолчанию

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

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

html-webpack-pluginПо умолчанию будетoutput.pathсоздать каталог вindex.htmlфайл и вставьтеscriptэтикетка, этикеткаsrcдляoutput.filename.

Сгенерированные файлы выглядят следующим образом:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

При настройке нескольких файлов вводаentry, все сгенерированные будут использоватьscriptПредставлять.

еслиwebpackимеет какие-либо ресурсы CSS в выходных данных (например, использованиеmini-css-extract-pluginизвлеченCSS), то эти ресурсы будут включены вHTMLголоваlinkМаркировка.

больше конфигурации

В реальном проекте вам нужно настроить некоторыеhtml-webpack-pluginконфигурации, такие как указание сгенерированного каталога и файла, использование указанного шаблона для создания файла, изменениеdocument.titleинформация и т. д. Это делается путем изменения конфигурации по умолчанию.

Имя свойства Тип поля По умолчанию иллюстрировать
title String Webpack App страница в Интернетеdocument.titleконфигурация, которую можно использовать в файле index.html<%= htmlWebpackPlugin.options.title %>Установите для заголовка страницы значение, установленное здесь.
filename String index.html htmlсгенерированное имя файла, вы можете использоватьassets/index.htmlЧтобы указать сгенерированный каталог файлов и имя файла,Фокус 1: обратный путь созданного файлаouput.pathКаталог. Пункт 2: «assets/index.html» и./assets/index.htmlЭффект от этих двух методов одинаков, как вoutput.pathсоздается в каталогеassets/index.html
template String нулевой генерироватьfilenameшаблон для файла, если он существуетsrc/index.ejsТогда этот файл будет использоваться как аналог.Фокус: сfilenameПуть другой, при сопоставлении с путем шаблона он будет начинаться с конечного пути проекта.
templateParameters Boolean|Object|Function нулевой Переопределить параметры, используемые в шаблоне по умолчанию
inject Boolean|String true формулироватьwebpackупакованныйjs cssСтатические ресурсы вставляются вhtmlрасположение, дляtrueилиbody, поставлюjsфайл вbodyдно, дляheadкогда будетjsсценарий вheadв элементе.
favicon String нулевой создан дляhtmlнастроитьfavicon
mete Object {} создан дляhtmlфайл вставить некоторыеmeteинформация, такая как:{viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}
base Object|String|false false Вводить в сгенерированный файлbaseтеги, напримерbase: "https://example.com/path/page.html <base>Тег указывает адрес по умолчанию или пункт назначения по умолчанию для всех ссылок на странице.
minify Boolean|Object еслиmodeУстановить какproductionПо умолчаниюtrueВ противном случае установитеfalse Установить сжатие статических ресурсов
hash Boolean false Если правда, то все содержалосьjsа такжеCSSДополнительный файл УникальныйwebpackСкомпилируйте хэш. Это очень полезно для обновления имени каждого файла кэша.
cache Boolean true настраиватьjs cssКэш файла, если файл не изменился, установить ли использование кеша
showErrors Boolean true При возникновении ошибки в файле, отображать ли ошибку на странице
xhtml Boolean false когда установлено наtrue, будет говорить<link>Метки установлены в соответствии сxhtmlканоническая самозакрывающаяся форма

Как использовать свойства

webpack.config.js

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist', 
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App', 
      filename: 'assets/admin.html'  // 在  output.path 目录下生成 assets/admin.html 文件
    })
  ]
}

генерировать несколькоhtmlдокумент

генерировать несколькоhtmlФайл должен быть только несколько раз вpluginsиспользуется вHtmlWebpackPlugin webpack.config.js

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist', 
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'My App', 
      filename: 'assets/admin.html'  // 在  output.path 目录下生成 assets/admin.html 文件
    })
  ]
}

Сгенерировано с использованием пользовательского шаблонаhtmlдокумент

если по умолчаниюhtmlШаблоны не могут удовлетворить потребности бизнеса, такие как необходимость написать файл для создания змеи впередиcssссылка на ресурс 'js', проще всего создать новый файл шаблона и использоватьtemplateатрибут указывает путь к файлу шаблона,html-webpack-pluginПлагин автоматически вставит пакет в этот файл шаблона.jsФайловый ресурс css.

webpack.config.js

plugins: [
  new HtmlWebpackPlugin({
    title: 'My App', 
    template: 'public/index.html'
  })
]

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link src="xxx/xxx.css">
  </head>
  <body>
  </body>
</html>

Получить с использованием пользовательского шаблонаHtmlWebpackPluginопределено вtitleНужно использовать<%= htmlWebpackPlugin.options.title %>

Minification

еслиminifyпараметры установлены наtrue(режим веб-пакетаproductionзначение по умолчанию), созданныйHTMLбуду использоватьHTML-minifierи следующие параметры сжатия:

{
  collapseWhitespace: true,
  removeComments: true,
  removeRedundantAttributes: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
  useShortDoctype: true
}

Чтобы использовать пользовательскийhtmlПараметры компрессора, пожалуйста, передайте объект для настройки. Этот объект не будет объединен с указанным выше объектом по умолчанию.

Чтобы отключить в производственном режимеminification, пожалуйстаminifyпараметры установлены наfalse.

Категории