Html loader что это

Содержание

html-loader
Install
Usage
Examples
Interpolation
Export formats
Advanced options
Export into HTML files
html-loader
Install
Usage
Examples
Interpolation
Export formats
Advanced options
Export into HTML files

html-loader

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

Install

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

 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"); // => ' // data-src="https://webpack-v3.jsx.app/loaders/html-loader/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="data:image/png;base64. " >'

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

minimized by running webpack —optimize-minimize

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

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

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

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 list as list> a href="$" />$a> #list> img src="$"> div>$div>

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=[name].[ext]', 'extract-loader', 'html-loader'], >

Источник