html loader的作用,html-loader

1 Docs

将html文档以字符串形式导出,需要时,可以进行压缩

1 默认情况下，每个本地的 都需要通过 require (require('./image.png'))来进行加载。

2 你可能需要在配置中为图片指定 loader(推荐 file-loader 或 url-loader )

3 你可以通过查询参数 attrs，来指定哪个标签属性组合(tag-attribute combination)应该被此 loader 处理。

4 传递数组或以空格分隔的 : 组合的列表。(默认值：attrs=img:src)

{

test: /\.(html)$/,

use: {

loader: 'html-loader',

options: {

attrs: [':data-src']

}

}

}

要完全禁用对标签属性的处理(例如，如果你在客户端处理图片加载)，你可以传入 attrs=false。

2 options

{

attributes // 类型:{Boolean|Object},默认值:true,描述:启用/禁用属性替换处理

minimize // 类型:{Function},默认值:undefined,描述:允许在html-loader处理前进行预处理

preprocessor // 类型:{Boolean|Object},默认值:生产环境true,其他环境false,描述:是否压缩html

esModule // 类型:{Boolean},默认值:false,描述:使用es模块化语法

}

attributes

{

test: /\.html$/i,

loader: 'html-loader',

options: {

// Disables attributes processing

attributes: false,

},

}

{

test: /\.html$/i,

loader: 'html-loader',

options: {

attributes: {

list: [

// All default supported tags and attributes

'...',

{

tag: 'img', // Tag name

attribute: 'data-src', // Attribute name

type: 'src', // Type of processing, can be `src` or `scrset`

},

{

tag: 'img',

attribute: 'data-srcset',

type: 'srcset',

},

],

urlFilter: (attribute, value, resourcePath) => {

// The `attribute` argument contains a name of the HTML attribute.

// The `value` argument contains a value of the HTML attribute.

// The `resourcePath` argument contains a path to the loaded HTML file.

if (/example\.pdf$/.test(value)) {

return false;

}

return true;

},

root: '.',

},

// Allow to filter some attributes

filter: (tag, attribute, attributes, resourcePath) => {

// The `tag` argument contains a name of the HTML tag.

// The `attribute` argument contains a name of the HTML attribute.

// The `attributes` argument contains all attributes of the tag.

// The `resourcePath` argument contains a path to the loaded HTML file.

if (/my-html\.html$/.test(resourcePath)) {

return false;

}

if (!/stylesheet/i.test(attributes.rel)) {

return false;

}

if (

attributes.type &&

attributes.type.trim().toLowerCase() !== 'text/css'

) {

return false;

}

return true;

}

},

}

minimize

{

test: /\.html$/i,

loader: 'html-loader',

options: {

minimize: true|false

},

}

{

test: /\.html$/i,

loader: 'html-loader',

options: {

minimize: {

caseSensitive: true,

collapseWhitespace: true,

conservativeCollapse: true,

keepClosingSlash: true,

minifyCSS: true,

minifyJS: true,

removeComments: true,

removeRedundantAttributes: true,

removeScriptTypeAttributes: true,

removeStyleLinkTypeAttributes: true,

}

},

}

preprocessor

esModule