html-loader

免責事項 html-loaderは、コミュニティメンバーによって維持されているサードパーティパッケージであり、webpackと同じサポート、セキュリティポリシー、またはライセンスを持っていない可能性があり、webpackによって維持されていません。

HTMLを文字列としてエクスポートします。コンパイラが必要とする場合、HTMLは最小化されます。

はじめに

開始するには、`html-loader`をインストールする必要があります。

npm install --save-dev html-loader

または

yarn add -D html-loader

または

pnpm add -D html-loader

次に、プラグインを`webpack`の設定に追加します。例:

file.js

import html from "./file.html";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
    ],
  },
};

オプション

ソース
プリプロセッサ
最小化
esModule

`sources`

型

type sources =
  | boolean
  | {
      list?: Array<{
        tag?: string;
        attribute?: string;
        type?: string;
        filter?: (
          tag: string,
          attribute: string,
          attributes: string,
          resourcePath: string,
        ) => boolean;
      }>;
      urlFilter?: (
        attribute: string,
        value: string,
        resourcePath: string,
      ) => boolean;
      scriptingEnabled?: boolean;
    };

デフォルト: `true`

デフォルトでは、ロード可能な属性（例：`<img src="image.png"/>`）はすべてインポートされます（`const img = require('./image.png')`または`import img from "./image.png""`）。設定で画像のローダーを指定する必要がある場合があります（推奨はasset modules）。

サポートされているタグと属性

`audio`タグの`src`属性
`embed`タグの`src`属性
`img`タグの`src`属性
`img`タグの`srcset`属性
`input`タグの`src`属性
`object`タグの`data`属性
`script`タグの`src`属性
`script`タグの`href`属性
`script`タグの`xlink:href`属性
`source`タグの`src`属性
`source`タグの`srcset`属性
`track`タグの`src`属性
`video`タグの`poster`属性
`video`タグの`src`属性
`image`タグの`xlink:href`属性
`image`タグの`href`属性
`use`タグの`xlink:href`属性
`use`タグの`href`属性
`rel`属性に`stylesheet`、`icon`、`shortcut icon`、`mask-icon`、`apple-touch-icon`、`apple-touch-icon-precomposed`、`apple-touch-startup-image`、`manifest`、`prefetch`、`preload`が含まれている場合、または`itemprop`属性が`image`、`logo`、`screenshot`、`thumbnailurl`、`contenturl`、`downloadurl`、`duringmedia`、`embedurl`、`installurl`、`layoutimage`である場合の`link`タグの`href`属性
`rel`属性に`stylesheet`、`icon`、`shortcut icon`、`mask-icon`、`apple-touch-icon`、`apple-touch-icon-precomposed`、`apple-touch-startup-image`、`manifest`、`prefetch`、`preload`が含まれている場合の`link`タグの`imagesrcset`属性
name属性がmsapplication-tileimage、msapplication-square70x70logo、msapplication-square150x150logo、msapplication-wide310x150logo、msapplication-square310x310logo、msapplication-config、twitter:imageの場合、またはproperty属性がog:image、og:image:url、og:image:secure_url、og:audio、og:audio:secure_url、og:video、og:video:secure_url、vk:imageの場合、あるいはitemprop属性がimage、logo、screenshot、thumbnailurl、contenturl、downloadurl、duringmedia、embedurl、installurl、layoutimageの場合の、metaタグのcontent属性。
name属性がmsapplication-taskの場合の、metaタグのcontent属性内のicon-uri値コンポーネント。

`boolean`

true値はすべてのデフォルト要素と属性の処理を有効にし、false値はすべての属性の処理を無効にします。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          // Disables attributes processing
          sources: false,
        },
      },
    ],
  },
};

`object`

処理するタグと属性を指定し、それらをフィルタリングし、URLをフィルタリングし、/で始まるソースを処理することができます。

例:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          sources: {
            list: [
              // All default supported tags and attributes
              "...",
              {
                tag: "img",
                attribute: "data-src",
                type: "src",
              },
              {
                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;
            },
          },
        },
      },
    ],
  },
};

`list`

型

type list = Array<{
  tag?: string;
  attribute?: string;
  type?: string;
  filter?: (
    tag: string,
    attribute: string,
    attributes: string,
    resourcePath: string,
  ) => boolean;
}>;

デフォルト: サポートされているタグと属性。

処理するタグと属性、およびその方法を設定し、一部をフィルタリングすることができます。

...構文を使用すると、デフォルトでサポートされているタグと属性を拡張できます。

例:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          sources: {
            list: [
              // All default supported tags and attributes
              "...",
              {
                tag: "img",
                attribute: "data-src",
                type: "src",
              },
              {
                tag: "img",
                attribute: "data-srcset",
                type: "srcset",
              },
              {
                // Tag name
                tag: "link",
                // Attribute name
                attribute: "href",
                // Type of processing, can be `src` or `scrset`
                type: "src",
                // 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;
                },
              },
            ],
          },
        },
      },
    ],
  },
};

タグ名が指定されていない場合、すべてのタグを処理します。

カスタムフィルタを使用して、処理するHTML要素を指定できます。

例:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          sources: {
            list: [
              {
                // Attribute name
                attribute: "src",
                // Type of processing, can be `src` or `scrset`
                type: "src",
                // Allow to filter some attributes (optional)
                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.

                  // choose all HTML tags except img tag
                  return tag.toLowerCase() !== "img";
                },
              },
            ],
          },
        },
      },
    ],
  },
};

フィルタは、サポートされている要素と属性を拡張するためにも使用できます。

たとえば、フィルタはアセットを参照するメタタグの処理に役立ちます。

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          sources: {
            list: [
              {
                tag: "meta",
                attribute: "content",
                type: "src",
                filter: (tag, attribute, attributes, resourcePath) => {
                  if (
                    attributes.value === "og:image" ||
                    attributes.name === "twitter:image"
                  ) {
                    return true;
                  }

                  return false;
                },
              },
            ],
          },
        },
      },
    ],
  },
};

注記
tagオプションを持つソースは、オプションのないソースよりも優先されます。

フィルタを使用して、デフォルトのソースを無効にすることができます。

例:

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          sources: {
            list: [
              "...",
              {
                tag: "img",
                attribute: "src",
                type: "src",
                filter: () => false,
              },
            ],
          },
        },
      },
    ],
  },
};

`urlFilter`

型

type urlFilter = (
  attribute: string,
  value: string,
  resourcePath: string,
) => boolean;

デフォルト: undefined

URLをフィルタリングできます。フィルタリングされたすべてのURLは解決されません（記述されたままコードに残ります）。要求できないソース（例：<img src="javascript:void(0)"/>）は、デフォルトでは処理されません。

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          sources: {
            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;
            },
          },
        },
      },
    ],
  },
};

`scriptingEnabled`

型

type scriptingEnabled = boolean;

デフォルト: `true`

デフォルトで、html-loaderのパーサーは<noscript>タグ内のコンテンツを#textとして解釈するため、このタグ内のコンテンツの処理は無視されます。

パーサーによる#ASTとしてのコンテンツ認識のために<noscript>内の処理を有効にするには、このパラメーターをfalseに設定します。

追加情報: scriptingEnabled

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          sources: {
            // Enables processing inside the <noscript> tag
            scriptingEnabled: false,
          },
        },
      },
    ],
  },
};

`preprocessor`

型

type preprocessor = (
  content: string | Buffer,
  loaderContext: LoaderContext,
) => HTMLElement;

デフォルト: undefined

処理前にコンテンツを前処理できます。

警告
常に有効なHTMLを返す必要があります。

file.hbs

<div>
  <p>{{firstname}} {{lastname}}</p>
  <img src="image.png" alt="alt" />
<div>

`function`

preprocessorオプションをfunctionインスタンスとして設定できます。

webpack.config.js

const Handlebars = require("handlebars");

module.exports = {
  module: {
    rules: [
      {
        test: /\.hbs$/i,
        loader: "html-loader",
        options: {
          preprocessor: (content, loaderContext) => {
            let result;

            try {
              result = Handlebars.compile(content)({
                firstname: "Value",
                lastname: "OtherValue",
              });
            } catch (error) {
              loaderContext.emitError(error);

              return content;
            }

            return result;
          },
        },
      },
    ],
  },
};

preprocessorオプションを非同期関数インスタンスとして設定することもできます。

例:

webpack.config.js

const Handlebars = require("handlebars");

module.exports = {
  module: {
    rules: [
      {
        test: /\.hbs$/i,
        loader: "html-loader",
        options: {
          preprocessor: async (content, loaderContext) => {
            let result;

            try {
              result = await Handlebars.compile(content)({
                firstname: "Value",
                lastname: "OtherValue",
              });
            } catch (error) {
              await loaderContext.emitError(error);

              return content;
            }

            return result;
          },
        },
      },
    ],
  },
};

`minimize`

型

type minimize =
  | boolean
  | {
      caseSensitive?: boolean;
      collapseWhitespace?: boolean;
      conservativeCollapse?: boolean;
      keepClosingSlash?: boolean;
      minifyCSS?: boolean;
      minifyJS?: boolean;
      removeComments?: boolean;
      removeRedundantAttributes?: boolean;
      removeScriptTypeAttributes?: boolean;
      removeStyleLinkTypeAttributes?: boolean;
    };

デフォルト: プロダクションモードではtrue、それ以外はfalse

html-loaderにHTMLの最小化を指示します。

`boolean`

デフォルトで有効になっている最小化ルールは以下のとおりです。

({
  caseSensitive: true,
  collapseWhitespace: true,
  conservativeCollapse: true,
  keepClosingSlash: true,
  minifyCSS: true,
  minifyJS: true,
  removeComments: true,
  removeRedundantAttributes: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
});

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          minimize: true,
        },
      },
    ],
  },
};

`object`

webpack.config.js

html-minifier-terserのドキュメントで、使用可能なオプションの詳細を確認してください。

webpack.conf.jsで以下のオプションを使用して、デフォルトルールを上書きできます。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          minimize: {
            removeComments: false,
            collapseWhitespace: false,
          },
        },
      },
    ],
  },
};

デフォルトルールを拡張できます。

webpack.config.js

const { defaultMinimizerOptions } = require("html-loader");

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          minimize: {
            ...defaultMinimizerOptions,
            removeComments: false,
            collapseWhitespace: false,
          },
        },
      },
    ],
  },
};

`esModule`

型

type esModule = boolean;

デフォルト: `true`

デフォルトで、html-loaderはESモジュール構文を使用するJSモジュールを生成します。ESモジュールを使用することが有利なケースもあります。モジュール連結やツリーシェイキングなどです。

CommonJSモジュール構文を有効にするには、以下を使用します。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          esModule: false,
        },
      },
    ],
  },
};

例

``コメントを使用したURL解決の無効化

コメントを使用すると、次のタグのソース処理を無効にできます。

<!-- Disabled url handling for the src attribute -->
<!-- webpackIgnore: true -->
<img src="image.png" />

<!-- Disabled url handling for the src and srcset attributes -->
<!-- webpackIgnore: true -->
<img
  srcset="image.png 480w, image.png 768w"
  src="image.png"
  alt="Elva dressed as a fairy"
/>

<!-- Disabled url handling for the content attribute -->
<!-- webpackIgnore: true -->
<meta itemprop="image" content="./image.png" />

<!-- Disabled url handling for the href attribute -->
<!-- webpackIgnore: true -->
<link rel="icon" type="image/png" sizes="192x192" href="./image.png" />

roots

resolve.rootsを使用すると、サーバー相対URL（'/'で始まる）のリクエストが解決されるディレクトリのリストを指定できます。

webpack.config.js

module.exports = {
  context: __dirname,
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {},
      },
      {
        test: /\.jpg$/,
        type: "asset/resource",
      },
    ],
  },
  resolve: {
    roots: [path.resolve(__dirname, "fixtures")],
  },
};

file.html

<img src="/image.jpg" />

// => image.jpg in __dirname/fixtures will be resolved

CDN

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.jpg$/,
        type: "asset/resource",
      },
      {
        test: /\.png$/,
        type: "asset/inline",
      },
    ],
  },
  output: {
    publicPath: "http://cdn.example.com/[fullhash]/",
  },
};

file.html

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

index.js

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

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

require('html-loader?{"sources":{"list":[{"tag":"img","attribute":"data-src","type":"src"}]}}!./file.html');

// => '<img src="image.jpg" data-src="data:image/png;base64,..." />'

require('html-loader?{"sources":{"list":[{"tag":"img","attribute":"src","type":"src"},{"tag":"img","attribute":"data-src","type":"src"}]}}!./file.html');

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

`script`タグと`link`タグの処理

script.file.js

console.log(document);

style.file.css

a {
  color: red;
}

file.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    <link rel="stylesheet" type="text/css" href="./style.file.css" />
  </head>
  <body>
    Content of the document......
    <script src="./script.file.js"></script>
  </body>
</html>

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/,
        type: "asset/resource",
        generator: {
          filename: "[name][ext]",
        },
      },
      {
        test: /\.html$/i,
        use: ["html-loader"],
      },
      {
        test: /\.js$/i,
        exclude: /\.file.js$/i,
        loader: "babel-loader",
      },
      {
        test: /\.file.js$/i,
        type: "asset/resource",
      },
      {
        test: /\.css$/i,
        exclude: /\.file.css$/i,
        loader: "css-loader",
      },
      {
        test: /\.file.css$/i,
        type: "asset/resource",
      },
    ],
  },
};

テンプレートエンジン

任意のテンプレートシステムを使用できます。以下はhandlebarsの例です。

file.hbs

<div>
  <p>{{firstname}} {{lastname}}</p>
  <img src="image.png" alt="alt" />
<div>

webpack.config.js

const Handlebars = require("handlebars");

module.exports = {
  module: {
    rules: [
      {
        test: /\.hbs$/i,
        loader: "html-loader",
        options: {
          preprocessor: (content, loaderContext) => {
            let result;

            try {
              result = Handlebars.compile(content)({
                firstname: "Value",
                lastname: "OtherValue",
              });
            } catch (error) {
              loaderContext.emitError(error);

              return content;
            }

            return result;
          },
        },
      },
    ],
  },
};

PostHTML

PostHTMLを追加のローダーなしで使用できます。

file.html

<img src="image.jpg" />

webpack.config.js

const posthtml = require("posthtml");
const posthtmlWebp = require("posthtml-webp");

module.exports = {
  module: {
    rules: [
      {
        test: /\.hbs$/i,
        loader: "html-loader",
        options: {
          preprocessor: (content, loaderContext) => {
            let result;

            try {
              result = posthtml().use(plugin).process(content, { sync: true });
            } catch (error) {
              loaderContext.emitError(error);

              return content;
            }

            return result.html;
          },
        },
      },
    ],
  },
};

HTMLファイルへのエクスポート

一般的なシナリオは、HTMLを独自の*.htmlファイルにエクスポートして、JavaScriptで挿入する代わりに直接提供することです。これは、html-loaderとasset modulesを組み合わせることで実現できます。

html-loaderはURLを解析し、画像などを必要に応じてrequireします。extract loaderはJavaScriptを適切なHTMLファイルに解析し、画像がrequireされ、適切なパスを指していることを保証します。asset modulesは*.htmlファイルを書き込みます。例:

webpack.config.js

module.exports = {
  output: {
    assetModuleFilename: "[name][ext]",
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        type: "asset/resource",
        generator: {
          filename: "[name][ext]",
        },
      },
      {
        test: /\.html$/i,
        use: ["html-loader"],
      },
    ],
  },
};

コントリビューション

まだお読みでない場合は、コントリビューションガイドラインをお読みください。

コントリビューション

ライセンス

MIT

このページを編集·このページを印刷·リポジトリへ移動

« 前へ

expose-loader

imports-loader

html-loader

はじめに

オプション

sources

boolean

object

list

urlFilter

scriptingEnabled

preprocessor

function

minimize

boolean

object

esModule

例

コメントを使用したURL解決の無効化

roots

CDN

scriptタグとlinkタグの処理

テンプレートエンジン

PostHTML

HTMLファイルへのエクスポート

コントリビューション

ライセンス

`sources`

`boolean`

`object`

`list`

`urlFilter`

`scriptingEnabled`

`preprocessor`

`function`

`minimize`

`boolean`

`object`

`esModule`

``コメントを使用したURL解決の無効化

`script`タグと`link`タグの処理