how to include loaders in webpack?

Question

I am trying to include Header.html and also footer.html inside index.html. Because I am going to use these two files as common for all

Answer 1

html-webpack-plugin supports templating with variables.

You can define the variables in your webpack.config.js

new HtmlWebpackPlugin({
    template: './src/index.html',
    header: '
hello world
',
    fotter: 'Footer'
}),

And put them in place in your index.html like so:

    
    
        <%= htmlWebpackPlugin.options.header %>
        
        <%= htmlWebpackPlugin.options.footer %>
    

---

To load the header and footer from normal HTML files requires an additional step and we use the built in fs node package for this (you don't have to install it).

let fs = require('fs');

const header = fs.readFileSync(__dirname + '/header.html');
const footer = fs.readFileSync(__dirname + '/footer.html');

module.exports = {

    // all of your normal config

    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html',
        header: header,
        footer: footer,
      })
     ]
});

Now when you run webpack your HTML file will be injected in the positions you specified with the content of your header and footer files.