diff --git a/README.md b/README.md index b8476fa2..98934791 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ or pnpm add -D html-loader ``` -Then add the plugin to your `webpack` config. For example: +Then add the loader to your `webpack` configuration. For example: **file.js** @@ -102,32 +102,33 @@ You may need to specify loaders for images in your configuration (recommended [` Supported tags and attributes: -- the `src` attribute of the `audio` tag -- the `src` attribute of the `embed` tag -- the `src` attribute of the `img` tag -- the `srcset` attribute of the `img` tag -- the `src` attribute of the `input` tag -- the `data` attribute of the `object` tag -- the `src` attribute of the `script` tag -- the `href` attribute of the `script` tag -- the `xlink:href` attribute of the `script` tag -- the `src` attribute of the `source` tag -- the `srcset` attribute of the `source` tag -- the `src` attribute of the `track` tag -- the `poster` attribute of the `video` tag -- the `src` attribute of the `video` tag -- the `xlink:href` attribute of the `image` tag -- the `href` attribute of the `image` tag -- the `xlink:href` attribute of the `use` tag -- the `href` attribute of the `use` tag -- the `href` attribute of the `link` tag when the `rel` attribute contains `stylesheet`, `icon`, `shortcut icon`, `mask-icon`, `apple-touch-icon`, `apple-touch-icon-precomposed`, `apple-touch-startup-image`, `manifest`, `prefetch`, `preload` or when the `itemprop` attribute is `image`, `logo`, `screenshot`, `thumbnailurl`, `contenturl`, `downloadurl`, `duringmedia`, `embedurl`, `installurl`, `layoutimage` -- the `imagesrcset` attribute of the `link` tag when the `rel` attribute contains `stylesheet`, `icon`, `shortcut icon`, `mask-icon`, `apple-touch-icon`, `apple-touch-icon-precomposed`, `apple-touch-startup-image`, `manifest`, `prefetch`, `preload` -- the `content` attribute of the `meta` tag when the `name` attribute is `msapplication-tileimage`, `msapplication-square70x70logo`, `msapplication-square150x150logo`, `msapplication-wide310x150logo`, `msapplication-square310x310logo`, `msapplication-config`, `twitter:image` or when the `property` attribute is `og:image`, `og:image:url`, `og:image:secure_url`, `og:audio`, `og:audio:secure_url`, `og:video`, `og:video:secure_url`, `vk:image` or when the `itemprop` attribute is `image`, `logo`, `screenshot`, `thumbnailurl`, `contenturl`, `downloadurl`, `duringmedia`, `embedurl`, `installurl`, `layoutimage` -- the `icon-uri` value component in `content` attribute of the `meta` tag when the `name` attribute is `msapplication-task` +- The `src` attribute of the `audio` tag +- The `src` attribute of the `embed` tag +- The `src` attribute of the `img` tag +- The `srcset` attribute of the `img` tag +- The `src` attribute of the `input` tag +- The `data` attribute of the `object` tag +- The `src` attribute of the `script` tag +- The `href` attribute of the `script` tag +- The `xlink:href` attribute of the `script` tag +- The `src` attribute of the `source` tag +- The `srcset` attribute of the `source` tag +- The `src` attribute of the `track` tag +- The `poster` attribute of the `video` tag +- The `src` attribute of the `video` tag +- The `xlink:href` attribute of the `image` tag +- The `href` attribute of the `image` tag +- The `xlink:href` attribute of the `use` tag +- The `href` attribute of the `use` tag +- The `href` attribute of the `link` tag when the `rel` attribute contains `stylesheet`, `icon`, `shortcut icon`, `mask-icon`, `apple-touch-icon`, `apple-touch-icon-precomposed`, `apple-touch-startup-image`, `manifest`, `prefetch`, `preload` or when the `itemprop` attribute is `image`, `logo`, `screenshot`, `thumbnailurl`, `contenturl`, `downloadurl`, `duringmedia`, `embedurl`, `installurl`, `layoutimage` +- The `imagesrcset` attribute of the `link` tag when the `rel` attribute contains `stylesheet`, `icon`, `shortcut icon`, `mask-icon`, `apple-touch-icon`, `apple-touch-icon-precomposed`, `apple-touch-startup-image`, `manifest`, `prefetch`, `preload` +- The `content` attribute of the `meta` tag when the `name` attribute is `msapplication-tileimage`, `msapplication-square70x70logo`, `msapplication-square150x150logo`, `msapplication-wide310x150logo`, `msapplication-square310x310logo`, `msapplication-config`, `twitter:image` or when the `property` attribute is `og:image`, `og:image:url`, `og:image:secure_url`, `og:audio`, `og:audio:secure_url`, `og:video`, `og:video:secure_url`, `vk:image` or when the `itemprop` attribute is `image`, `logo`, `screenshot`, `thumbnailurl`, `contenturl`, `downloadurl`, `duringmedia`, `embedurl`, `installurl`, `layoutimage` +- The `icon-uri` value component in `content` attribute of the `meta` tag when the `name` attribute is `msapplication-task` #### `boolean` -The `true` value enables the processing of all default elements and attributes, the `false` value disables the processing of all attributes. +- true: Enables processing of all default tags and attributes +- false: Disables processing entirely **webpack.config.js** @@ -150,7 +151,7 @@ module.exports = { #### `object` -Allows you to specify which tags and attributes to process, filter them, filter urls and process sources starting with `/`. +Allows you to specify which tags and attributes to process, filter them, filter URLs and process sources starting with `/`. For example: @@ -291,7 +292,7 @@ module.exports = { If the tag name is not specified it will process all the tags. -> You can use your custom filter to specify html elements to be processed. +> You can use your custom filter to specify HTML elements to be processed. For example: @@ -418,7 +419,7 @@ type urlFilter = ( Default: `undefined` -Allow to filter urls. All filtered urls will not be resolved (left in the code as they were written). +Allow to filter URLs. All filtered URLs will not be resolved (left in the code as they were written). Non-requestable sources (for example ``) are not handled by default. ```js @@ -459,9 +460,9 @@ type scriptingEnabled = boolean; Default: `true` -By default, the parser in `html-loader` interprets content inside `