how to include loaders in webpack?

后端未结

关注

 1  919

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

相关标签:

1条回答

春和景丽

2020-12-19 13:55

html-webpack-plugin supports templating with variables.

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

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

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

<html>
    <head></head>
    <body>
        <%= htmlWebpackPlugin.options.header %>
        <!-- all your standard template here -->
        <%= htmlWebpackPlugin.options.footer %>
    </body>
</html>

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.

0 讨论(0)