[![npm][npm]][npm-url]
[![deps][deps]][deps-url]
[![test][test]][test-url]
[![coverage][cover]][cover-url]
[![chat][chat]][chat-url]

src="https://worldvectorlogo.com/logos/html5.svg">

src="https://worldvectorlogo.com/logos/webpack.svg">

HTML Loader srcset

Exports HTML as string. HTML is minimized when the compiler demands.

Variant of the html-loader module for Webpack with a patch to load srcset attribute(s) and actually produces valid tags

Install

``bash
npm i --save-dev html-loader-srcset
`

Usage

By default every local is required (require('./image.png')). You may need to specify loaders for images in your configuration (recommended file-loader or url-loader).

Also every > is converted to require statements. For example
` html

`
is converted to
` javascript
""
`

You can specify which tag-attribute combination should be processed by this loader via the query parameter attrs. Pass an array or a space-separated list of : combinations. (Default: attrs=[img:src, img:srcset]). The srcset-specific qualifiers such as 100w or 3x are supported in any processed attribute.

If you use , and lots of them make use of a custom-src attribute, you don't have to specify each combination :: just specify an empty tag like attrs=:custom-src and it will match every element.

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

To completely disable tag-attribute processing (for instance, if you're handling image loading on the client side) you can pass in attrs=false.

Examples

With this configuration:

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

` html


`

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

// => '// data-src="image2x.png">'
`

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

// => ''
`

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

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

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

// => ''
`

minimized by running webpack --optimize-minimize

`html
' data-src=data:image/png;base64,...>'
`

or specify the minimize property in the rule's options in your webpack.conf.js

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

See html-minifier's documentation for more information on the available options.

The enabled rules for minimizing by default are the following ones:
- removeComments
- removeCommentsFromCDATA
- removeCDATASectionsFromCDATA
- collapseWhitespace
- conservativeCollapse
- removeAttributeQuotes
- useShortDoctype
- keepClosingSlash
- minifyJS
- minifyCSS
- removeScriptTypeAttributes
- removeStyleTypeAttributes

The rules can be disabled using the following options in your webpack.conf.js

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

$3

For urls that start with a /, the default behavior is to not translate them.
If a root query parameter is set, however, it will be prepended to the url
and then translated.

With the same configuration as above:

` html


`

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

// => ''
`

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

// => ''
`

$3

You can use interpolate flag to enable interpolation syntax for ES6 template strings, like so:

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

`html
)}">

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

`html

<#list list as list>
${list.name}


)}">

+ `module.exports` (default, cjs format). "Hello world" becomes `module.exports = "Hello world";`
+ `exports.default` (when `exportAsDefault` param is set, es6to5 format). "Hello world" becomes `exports.default = "Hello world";`
+ `export default` (when `exportAsEs6Default` param is set, es6 format). "Hello world" becomes `export default "Hello world";`

$3

If you need to pass more advanced options, especially those which cannot be stringified, you can also define an htmlLoader-property on your webpack.config.js:

`js
var path = require('path')

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

If you need to define two different loader configs, you can also change the config's property name via html-loader-srcset?config=otherHtmlLoaderConfig:

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

$3

A very common scenario is exporting the HTML into their own _.html_ file, to
serve them directly instead of injecting with javascript. This can be achieved
with a combination of 3 loaders:

- file-loader
- extract-loader
- html-loader-srcset

The html-loader-srcset will parse the URLs, require the images and everything you
expect. The extract loader will parse the javascript back into a proper html
file, ensuring images are required and point to proper path, and the file loader
will write the _.html_ file for you. Example:

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

Maintainers

src="https://avatars.githubusercontent.com/u/18315?v=3"> Hemanth	src="https://avatars.githubusercontent.com/u/8420490?v=3"> Joshua Wiens	Michael Ciniawsky	src="https://avatars.githubusercontent.com/u/6542274?v=3"> Imvetri
src="https://avatars.githubusercontent.com/u/1520965?v=3"> Andrei Crnković	src="https://avatars.githubusercontent.com/u/3367801?v=3"> Yuta Hiroto	Vesselin Petrunov	src="https://avatars.githubusercontent.com/u/973543?v=3"> Gajus Kuizinas

[npm]: https://img.shields.io/npm/v/html-loader-srcset.svg
[npm-url]: https://npmjs.com/package/html-loader-srcset

[deps]: https://david-dm.org/webpack/html-loader-srcset.svg
[deps-url]: https://david-dm.org/webpack/html-loader-srcset

[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
[chat-url]: https://gitter.im/webpack/webpack

[test]: http://img.shields.io/travis/webpack/html-loader.svg
[test-url]: https://travis-ci.org/webpack/html-loader

[cover]: https://codecov.io/gh/webpack/html-loader/branch/master/graph/badge.svg
[cover-url]: https://codecov.io/gh/webpack/html-loader