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,任何其它的 ${} 不被转换,你可以设置 interpolate 标记为 require,就像这样:
require("html-loader?interpolate=require!./file.ftl");
#list>
导出格式
这里有几种不同的可用导出格式:
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' ]
}