What is the use of html-loader and how it work's in Webpack

user_13060463 0
Viewed 9197

I was learning webpack and I came across loaders,The defination of loaders says that it transform your code,so that it can be included inside the javascript bundle.

But,How html-loader works?

The html-loader defination says that it exports html as String (What does it mean).

it also says that every loadable attributes (for example <img src="image.png" is imported as require('./image.png'),and you may need to specify loader for images in your configuration (file-loader or url-loader), What does it mean.

I want to know, what actually html-loader do. Does it convert html into String or it just convert the img tag to require. How all this work together.

Can someone explain in detail.

webpack-html-loader webpack-loader webpack javascript
2 Answers

Since webpack completely overhauled how it works in 5.0. "Exports HTML as a string" is not exactly the best description of a use case anymore. It used to be that one would chain html-loader with extract-loader and file-loader to emit html. Now I would use it to parse html for whatever reason. https://v4.webpack.js.org/loaders/extract-loader/

user_126485880

As you can read from the https://webpack.js.org/loaders/html-loader/

This does more than just converting into strings.

You can preprocess the htmls like adding values to variables, You can apply filters, ... to name a few

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

The above code is as taken from the link, this is an example of filtering.

Alternatively, you can also use this plugin html-webpack-plugin

user_16402820
Related