html-loader only works on index.html file

Question

html-loader only works on index.html file

581 Views Asked by jerome At 20 October 2024 at 05:57

I'm working on a static site project, and have to now add multiple pages using the same header and footer. I'm trying to do this by turning the header.html and footer.html files into partials.

I've setup my webpack.config.js to use HtmlWebpackPlugin where the template is the index.html file.

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

I've also called the partials in the index.html file as follows:

<body>
    <%= require('html-loader!./partials/header.html').default %>
    
    
    <%= require('html-loader!./partials/home.html').default %>


    <%= require('html-loader!./partials/footer.html').default %>
</body>

This works on the index file. But now I've got to add a portfolio.html page and reuse the header and footer. When I call the partials the same way, they render as strings on the html page

Could someone help me with this? I don't know how to reuse the partials in other html pages.

Original Q&A

There are 1 best solutions below

**Lin Du** · Answer 1

The issue has nothing to do with html-loader. You didn't use html-webpack-plugin to process the portfolio.html file. This plugin will use ejs/lodash template by default to process the special template tag <%= >.

See Generating Multiple HTML Files:

To generate more than one HTML file, declare the plugin more than once in your plugins array

E.g.

Project structure(after building):

$ tree -L 3 -I node_modules
.
├── dist
│   ├── home.js
│   ├── index.html
│   ├── portfolio.html
│   └── portfolio.js
├── package-lock.json
├── package.json
├── src
│   ├── index.html
│   ├── index.js
│   ├── partials
│   │   ├── footer.html
│   │   ├── header.html
│   │   └── home.html
│   ├── portfolio.html
│   └── portfolio.js
└── webpack.config.js

3 directories, 14 files

src/index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            http-equiv="X-UA-Compatible"
            content="IE=edge"
        />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>index</title>
    </head>
    <body>
    <%= require('html-loader!./partials/header.html').default %>
    <%= require('html-loader!./partials/home.html').default %>
    <%= require('html-loader!./partials/footer.html').default %>
  </body>
</html>

src/portfolio.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>portfolio</title>
    </head>
    <body>
    <%= require('html-loader!./partials/header.html').default %>
    <main>This is portfolio page</main>
    <%= require('html-loader!./partials/footer.html').default %>
  </body>
</html>

src/partials/header.html:

<header>This is header</header>

src/partials/footer.html:

<footer>This is footer</footer>

src/partials/home.html:

<main>This is home page</main>

webpack.config.js:

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

module.exports = {
    mode: 'production',
    entry: {
        home: './src/index.js',
        portfolio: './src/portfolio.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'src/index.html',
            chunks: ['home'],
            minify: false,
        }),
        new HtmlWebpackPlugin({
            filename: 'portfolio.html',
            template: 'src/portfolio.html',
            chunks: ['portfolio'],
            minify: false,
        }),
    ],
};

Build logs:

> webpack

assets by path *.html 791 bytes
  asset index.html 422 bytes [compared for emit]
  asset portfolio.html 369 bytes [compared for emit]
assets by path *.js 0 bytes
  asset home.js 0 bytes [compared for emit] [minimized] (name: home)
  asset portfolio.js 0 bytes [compared for emit] [minimized] (name: portfolio)
./src/index.js 1 bytes [built] [code generated]
./src/portfolio.js 1 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 277 ms

Output

dist/index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            http-equiv="X-UA-Compatible"
            content="IE=edge"
        />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>index</title>
    <script defer src="home.js"></script></head>
    <body>
    <header>This is header</header> 
    <main>This is home page</main> 
    <footer>This is footer</footer> 
  </body>
</html>

dist/portfolio.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>portfolio</title>
    <script defer src="portfolio.js"></script></head>
    <body>
    <header>This is header</header> 
    <main>This is portfolio page</main>
    <footer>This is footer</footer> 
  </body>
</html>

package.json:

{
    "version": "1.0.0",
    "scripts": {
        "build": "webpack"
    },
    "devDependencies": {
        "html-loader": "^4.2.0",
        "html-webpack-plugin": "^5.5.3",
        "webpack": "^5.80.0",
        "webpack-cli": "^5.0.2"
    }
}

html-loader only works on index.html file

There are 1 best solutions below

Related Questions in HTML

Related Questions in WEBPACK

Related Questions in HTML-WEBPACK-PLUGIN

Related Questions in WEBPACK-HTML-LOADER

Trending Questions

Popular # Hahtags

Popular Questions