html-loader

Экспортирует HTML как строку. HTML минимизируется, когда этого требует компилятор.

Установка

npm i -D html-loader

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

По умолчанию каждый локальный <img src="image.png"> требуется (require('./image.png')). Возможно, вам потребуется указать загрузчики для изображений в вашей конфигурации (рекомендуется file-loader или url-loader).

Вы можете указать, какие сочетания тегов и атрибутов должен обрабатывать этот загрузчик, используя параметр запроса attrs. Передайте массив или список, разделенный пробелами, сочетаний <tag>:<attribute>. (По умолчанию: attrs=img:src)

Если вы используете <custom-elements>, и многие из них используют атрибут custom-src, вам не нужно указывать каждое сочетание <tag>:<attribute>: достаточно указать пустой тег, такой как attrs=:custom-src, и он будет соответствовать каждому элементу.

{
  test: /\.(html)$/,
  use: {
    loader: 'html-loader',
    options: {
      attrs: [':data-src']
    }
  }
}

Чтобы полностью отключить обработку сочетаний тегов и атрибутов (например, если вы обрабатываете загрузку изображений на стороне клиента), вы можете передать attrs=false.

Примеры

С этой конфигурацией:

{
  module: {
    rules: [
      { test: /\.jpg$/, use: [ "file-loader" ] },
      { test: /\.png$/, use: [ "url-loader?mimetype=image/png" ] }
    ]
  },
  output: {
    publicPath: "http://cdn.example.com/[hash]/"
  }
}

<img src="image.png" data-src="image2x.png" >

require("html-loader!./file.html");

// => '<img src="http://cdn.example.com/49eba9f/a992ca.png"
//         data-src="image2x.png">'

require("html-loader?attrs=img:data-src!./file.html");

// => '<img src="image.png" data-src="data:image/png;base64,..." >'

require("html-loader?attrs=img:src img:data-src!./file.html");
require("html-loader?attrs[]=img:src&attrs[]=img:data-src!./file.html");

// => '<img  src="http://cdn.example.com/49eba9f/a992ca.png"        
//           data-src="data:image/png;base64,..." >'

require("html-loader?-attrs!./file.html");

// => '<img  src="image.jpg"  data-src="image2x.png" >'

минимизирован путём выполнения webpack --optimize-minimize

'<img src=http://cdn.example.com/49eba9f/a9f92ca.jpg
      data-src=data:image/png;base64,...>'

или укажите свойство minimize в опциях правила в вашем webpack.conf.js

module: {
  rules: [{
    test: /\.html$/,
    use: [ {
      loader: 'html-loader',
      options: {
        minimize: true
      }
    }],
  }]
}

Для получения дополнительной информации о доступных параметрах обратитесь к документации html-minifier.

Включенные по умолчанию правила минимизации следующие:

• removeComments

• removeCommentsFromCDATA

• removeCDATASectionsFromCDATA

• collapseWhitespace

• conservativeCollapse

• removeAttributeQuotes

• useShortDoctype

• keepClosingSlash

• minifyJS

• minifyCSS

• removeScriptTypeAttributes

• removeStyleTypeAttributes

  Эти правила можно отключить, используя следующие параметры в вашем webpack.conf.js

module: {
  rules: [{
    test: /\.html$/,
    use: [ {
      loader: 'html-loader',
      options: {
        minimize: true,
        removeComments: false,
        collapseWhitespace: false
      }
    }],
  }]
}

URL «относительные к корню»

Для URL, начинающихся с /, поведение по умолчанию заключается в том, чтобы не переводить их. Однако, если установлен параметр запроса root, он будет добавлен к URL перед переводом.

С той же конфигурацией, что и выше:

<img src="/image.jpg">

require("html-loader!./file.html");

// => '<img  src="/image.jpg">'

require("html-loader?root=.!./file.html");

// => '<img  src="http://cdn.example.com/49eba9f/a992ca.jpg">'

Интерполяция

Вы можете использовать флаг interpolate для включения синтаксиса интерполяции для ES6 шаблонов строк, например:

require("html-loader?interpolate!./file.html");

<img src="${require(`./images/gallery.png`)}">

<div>${require('./components/gallery.html')}</div>

И если вы хотите использовать только require в шаблоне, и все остальные ${} не должны быть переведены, вы можете установить флаг interpolate в значение require, как показано ниже:

require("html-loader?interpolate=require!./file.ftl");

<#list list as list>
  <a href="${list.href!}" />${list.name}</a>
</#list>

<img src="${require(`./images/gallery.png`)}">

<div>${require('./components/gallery.html')}</div>

Форматы экспорта

Доступны различные форматы экспорта:

• module.exports (по умолчанию, формат cjs). «Привет мир» становится module.exports = "Hello world";
• exports.default (когда установлен параметр exportAsDefault, формат es6to5). «Привет мир» становится exports.default = "Hello world";
• export default (когда установлен параметр exportAsEs6Default, формат es6). «Привет мир» становится export default "Hello world";

Дополнительные параметры

Если вам нужно передать дополнительные параметры, особенно те, которые нельзя привести к строковому виду, вы также можете определить свойство htmlLoader в вашем webpack.config.js:

var path = require('path')

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [ "html-loader" ]
      }
    ]
  },
  htmlLoader: {
    ignoreCustomFragments: [/\{\{.*?}}/],
    root: path.resolve(__dirname, 'assets'),
    attrs: ['img:src', 'link:href']
  }
};

Если вам нужно определить две разные конфигурации загрузчика, вы также можете изменить имя свойства конфигурации с помощью html-loader?config=otherHtmlLoaderConfig:

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [ "html-loader?config=otherHtmlLoaderConfig" ]
      }
    ]
  },
  otherHtmlLoaderConfig: {
    ...
  }
};

Экспорт в файлы HTML

Очень распространённым сценарием является экспорт HTML в собственные файлы .html для их прямого обслуживания вместо инъекции с помощью javascript. Этого можно добиться с помощью комбинации из 3 загрузчиков:

• file-loader
• extract-loader
• html-loader

html-loader будет анализировать URL, подключать изображения и всё, что вы ожидаете. extract-loader преобразует javascript обратно в правильный HTML-файл, гарантируя, что изображения подключены и указывают на правильный путь, а file-loader создаст для вас файл .html. Пример:

{
  test: /\.html$/,
  use: ['file-loader?name=[name].[ext]', 'extract-loader', 'html-loader'],
}