加载中...

html-loader

安装 

npm i -D html-loader

Usage

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

您可以通过查询参数 attrs，来指定哪个标签属性组合(tag-attribute combination)应该被此 loader 处理。传递数组或以空格分隔的 <tag>:<attribute> 组合的列表。（默认值：attrs=img:src）

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

示例

使用此配置： 

{
  module: {
    loaders: [
      { test: /\.jpg$/, loader: "file-loader" },
      { test: /\.png$/, loader: "url-loader?mimetype=image/png" }
    ]
  },
  output: {
    publicPath: "http://cdn.example.com/[hash]/"
  }
} 
<!-- file.html -->
<img src="image.png" data-src="image2x.png" > 
require("html-loader!./file.html");

// => '<img src="http://cdn.example.com/49eba9f/a992ca.png"
//         data-src="image2x.png">' 
require("html-loader?attrs=img:data-src!./file.html");

// => '<img src="image.png" data-src="data:image/png;base64,..." >' 
require("html-loader?attrs=img:src img:data-src!./file.html");
require("html-loader?attrs[]=img:src&attrs[]=img:data-src!./file.html");

// => '<img  src="http://cdn.example.com/49eba9f/a992ca.png"        
//           data-src="data:image/png;base64,..." >' 
require("html-loader?-attrs!./file.html");

// => '<img  src="image.jpg"  data-src="image2x.png" >'

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

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

或者在 webpack.conf.js 中指定 minimize 查询参数 

module: {
  loaders: [{
    test: /\.html$/,
    loader: 'html',
    query: {
      minimize: true
    }
  }]
}

'Root-relative' URLs

对于以 / 开头的 url，默认行为是不转换它们。如果设置了 root 查询参数，它将被添加到 URL 之前，然后进行转换。

和上面配置相同： 

<!-- file.html -->
<img src="/image.jpg"> 
require("html-loader!./file.html");

// => '<img  src="/image.jpg">' 
require("html-loader?root=.!./file.html");

// => '<img  src="http://cdn.example.com/49eba9f/a992ca.jpg">'

插值

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

require("html-loader?interpolate!./file.html"); 
<img src="${require(`./images/gallery.png`)}">

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

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

require("html-loader?interpolate=require!./file.ftl"); 
 <#list list as list>
  <a href="${list.href!}" />${list.name}</a>
</#list>

<img src="${require(`./images/gallery.png`)}">

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

导出格式

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

  • 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: {
    loaders: [
      {
        test: /\.html$/,
        loader: "html-loader"
      }
    ]
  },
  htmlLoader: {
    ignoreCustomFragments: [/\{\{.*?}}/],
    root: path.resolve(__dirname, 'assets'),
    attrs: ['img:src', 'link:href']
  }
};

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

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.html$/,
        loader: "html-loader?config=otherHtmlLoaderConfig"
      }
    ]
  },
  otherHtmlLoaderConfig: {
    ...
  }
};

导出到 HTML 文件

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

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

{
  test: /\.html$/,
  loader: 'file-loader?name=[path][name].[ext]!extract-loader!html-loader'
}

维护人员

Hemanth Joshua Wiens Michael Ciniawsky Imvetri
Andrei Crnković Yuta Hiroto Vesselin Petrunov Gajus Kuizinas

LICENSE

MIT

http://www.opensource.org/licenses/mit-license.php

Copyright (c) 2016 Tobias Koppers @sokra

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

原文：https://webpack.js.org/loaders/html-loader/

还没有评论.