html-require-loader

Webpack loader for including requiring other HTML files with a <require> tag.

latest

Source

npm

Version: 1.0.1

Version published: 7 years ago

Maintainers: 1

Created: 5 years ago

Source

html-require-loader

Webpack loader for including requiring other HTML files with a tag.

Allows for including HTML files like:

<body>
  <h1 id="foo"></h1>
  <h2 id="bar"></h2>

  <require path="baz.html">
  <require path="templates/qux.html">
</body>

Usage

npm install --save html-require-loader

Configuration

Option	Description	Default
root	Root path to look for templates.	Same path as required HTML file.

var path = require('path');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.html/,
        exclude: /(node_modules)/,
        use: [
          {
            loader: 'html-require-loader',
            options: {
              root: path.resolve(__dirname, 'src')
            }
          }
        ]
      }
    ]
  }
  // ...
}

And your require...

require('./index.html');

And then requiring or including other HTML files.

<body>
  <h1 id="foo"></h1>
  <h2 id="bar"></h2>

  <require path="baz.html"></require>
  <require path="templates/qux.html"></require>
</body>

Will be transformed into something like:

<body>
  <h1 id="foo"></h1>
  <h2 id="bar"></h2>

  <!-- <require path="/path/to/baz.html"> -->
  <h3 id="baz"></h3>
  <!-- </require> -->

  <!-- <require path="/path/to/qux.html"> -->
  <h4 id="qux"></h4>
  <!-- </require> -->
</body>

The HTML comments (require markers) are left in to potentially assist with other loaders for sourcemaps and hot reloading.

Keywords

webpack

loader

FAQs

What is html-require-loader?

Is html-require-loader well maintained?

Package last updated on 07 Mar 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install