[SOLVED] How to include raw static html file into another html file with webpack

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

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?

Solution

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.