html-loader

1 Docs

webpack文档
html-loader文档

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

1 默认情况下，每个本地的 <img src="image.png"> 都需要通过 require （require('./image.png')）来进行加载。
2 你可能需要在配置中为图片指定 loader（推荐 file-loader 或 url-loader ）
3 你可以通过查询参数 attrs，来指定哪个标签属性组合(tag-attribute combination)应该被此 loader 处理。
4 传递数组或以空格分隔的 <tag>:<attribute> 组合的列表。（默认值：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