html loader事件,html-loader

html loader module for webpack

HTML Loader

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

Install

npm i -D html-loader

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).

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)

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.

{

test: /\.(html)$/,

use: {

loader: 'html-loader',

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:

{

module: {

rules: [

{ test: /\.jpg$/, use: [ "file-loader" ] },

{ test: /\.png$/, use: [ "url-loader?mimetype=image/png" ] }

]

},

output: {

publicPath: "http://cdn.example.com/[hash]/"

}

}

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

// => '

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

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

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

// => '

// data-src="https://img-blog.csdnimg.cn/2022010703262365826.png" >'require("html-loader?-attrs!./file.html");

// => ''

minimized by running webpack --optimize-minimize

'

data-src=https://img-blog.csdnimg.cn/2022010703262365826.png>'

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

module: {

rules: [{

test: /\.html$/,

use: [ {

loader: 'html-loader',

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

module: {

rules: [{

test: /\.html$/,

use: [ {

loader: 'html-loader',

options: {

minimize: true,

removeComments: false,

collapseWhitespace: false

}

}],

}]

}

'Root-relative' URLs

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:

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

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

// => ''

Interpolation

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

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

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

And if you only want to use require in template and any other ${} are not to be translated, you can set interpolate flag to require, like so:

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

${list.name}

#list>

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

Export formats

There are different export formats available:

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";

Advanced options

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:

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']

}

};

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

module.exports = {

...

module: {

rules: [

{

test: /\.html$/,

use: [ "html-loader?config=otherHtmlLoaderConfig" ]

}

]

},

otherHtmlLoaderConfig: {

...

}

};

Export into HTML files

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:

The html-loader 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:

{

test: /\.html$/,

use: [ 'file-loader?name=[path][name].[ext]!extract-loader!html-loader' ]

}

Maintainers

HomePage

Repository