html loader事件,html-loader - Webpack 中文文档

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

安装

npm i -D html-loader

用法

默认情况下，每个本地的 都需要通过 require (require('./image.png'))来进行加载。你可能需要在配置中为图片指定 loader(推荐 file-loader 或 url-loader )

你可以通过查询参数 attrs，来指定哪个标签属性组合(tag-attribute combination)应该被此 loader 处理。传递数组或以空格分隔的 : 组合的列表。(默认值：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']

}

}

}

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

示例

使用此配置：

{

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/2022010706305554989.png" >'

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

// => ''

通过运行 webpack --optimize-minimize 来最小化

'

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

或者在 webpack.conf.js 的 rule 选项中指定 minimize 属性

module: {

rules: [{

test: /\.html$/,

use: [ {

loader: 'html-loader',

options: {

minimize: true

}

}],

}]

}

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

}

}],

}]

}

对于以 / 开头的 url，默认行为是不转换它们。

如果设置了 root 查询参数，它将被添加到 URL 之前，然后进行转换。

和上面配置相同：

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

// => ''

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

// => ''

插值

你可以使用 interpolate 标记，为 ES6 模板字符串启用插值语法，就像这样：

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

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

如果你只想在模板中使用 require，任何其它的 ${} 不被转换，你可以设置 interpolate 标记为 require，就像这样：

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

${list.name}

#list>

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

导出格式

这里有几种不同的可用导出格式：

module.exports(默认配置，cjs 格式)。"Hello world" 转为 module.exports = "Hello world";

exports.default (当设置了 exportAsDefault 参数，es6to5 格式)。"Hello world" 转为 exports.default = "Hello world";

export default (当设置了 exportAsEs6Default 参数，es6 格式)。"Hello world" 转为 export default "Hello world";

高级选项

如果你需要传递更多高级选项，特别是那些不能被字符串化，你还可以在 webpack.config.js 中定义一个 htmlLoader 属性：

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

}

};

如果你需要定义两个不同的 loader 配置，你也可以通过 html-loader?config=otherHtmlLoaderConfig 改变配置的属性名：

module.exports = {

...

module: {

rules: [

{

test: /\.html$/,

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

}

]

},

otherHtmlLoaderConfig: {

...

}

};

导出到 HTML 文件

一个很常见的场景，将 HTML 导出到 .html 文件中，直接访问它们，而不是使用 javascript 注入。这可以通过3个 loader 的组合来实现：

html-loader 将解析 URL，并请求图片和你所期望的一切资源。extract-loader 会将 javascript 解析为合适的 html 文件，确保引用的图片指向正确的路径，file-loader 将结果写入 .html 文件。示例：

{

test: /\.html$/,

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

}