How to include raw static html file into another html file with webpack

Question

I have a header.html file

<header>
  <nav>
    ... some code here ...
  </nav>
</header>

And I have an index.html file too where I want to include this header.html.

My index.html looks like this:

<body>
  ${require('./header.html')}
  <div class="content">
    <!-- some content here -->
  </div>
  <div class="footer">
    <!-- some content here -->
  </div>
</body>

I'm using this webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: ['./src/js/index.js', ...],
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'js/index.js'
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: ['html-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/main.html',
      filename: 'main.html'
    })
  ]
};

I tried to include header.html like this:

${require('./header.html')}

and this too:

<%= require('./header.html') %>

tried to import in js/index.js file with this line:

import header from 'html-loader!../header.html';

...combined with this:

${require('./header.html')}

and this:

${require(header)}

but nothing work. I just give back my ${require ...} code as plain text in index.html, and nothing included.

Any idea how to include the header.html file?

user3379459 · Accepted Answer · 2020-03-20 10:02:47Z

4

Note that the interpolate option was removed in html-loader v1.0.0. The solution works with html-loader v0.5.5 and ${require('./header.html')}

answered Mar 20, 2020 at 10:02

user3379459

412 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

netdjw Over a year ago

is there any option / solution instead of interpolation?

mararn1618 Over a year ago

how can we interpolate now? :(

ChrisR · Accepted Answer · 2020-05-05 11:51:54Z

3

EDIT: This answer is not valid anymore with html-loader > 0.5.5

You need to enable interpolation like this:

  module: {
    rules: [
      {
        test: /\.html$/,
        use: {
          loader: 'html-loader',
          options: {
            interpolate: true
          }
        }
      }
    ]
  },

Source for my answer, this question/answer.

edited May 5, 2020 at 11:51

answered Jul 28, 2018 at 7:53

ChrisR

3,9981 gold badge18 silver badges24 bronze badges

1 Comment

miladfm Over a year ago

the solution don't support any more. Is there any other solution ?

Collectives™ on Stack Overflow

How to include raw static html file into another html file with webpack

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related