Multiple html files using webpack

Question

I'm trying to do something in a project that I'm not sure if it is possible, I am in a wrong way or misunderstanding something. We are using webpack, and the idea is to serve more than one html file.

localhost:8181 -> serves index.html
localhost:8181/example.html -> serves example.html

I'm trying to do it by setting multiple entry points, following the documentation:

The folder structure is:

/
|- package.json
|- webpack.config.js
  /src
   |- index.html
   |- example.html
   | /js
      |- main.js
      |- example.js

Webpack.config.js:

...
entry: {
    main: './js/main.js',
    exampleEntry: './js/example.js'
},
output: {
    path: path.resolve(__dirname, 'build', 'target'),
    publicPath: '/',
    filename: '[name].bundle.js',
    chunkFilename: '[id].bundle_[chunkhash].js',
    sourceMapFilename: '[file].map'
},
...

index.html

<!DOCTYPE html>
<html
<head>
    ...
    <link type="text/css" href="/style/default.css">
</head>
<body>
    <div id="container"></div>
    <script src="/main.bundle.js"></script>
</body>
</html>

example.html:

<!DOCTYPE html>
<html
<head>
    ...
    <link type="text/css" href="/style/default.css">
</head>
<body>
    ...
    <script src="/example.bundle.js"></script>
</body>
</html>

Somebody knows what I'm doing wrong?

Thank you.

Are you able to find the solution for this ? I am also looking for the same use case. — monica
– monica, Commented Jan 23, 2017 at 7:00

starball · Accepted Answer · 2022-12-23 09:16:09Z

186

See an entrypoint as the root of a tree that references many other assets like javascript modules, images, templates and so on. When you define more than one entrypoint, you basically split your assets into so called chunks to not have all your code and assets in one single bundle.

What I think you want to achieve is to have more than one "index.html" for different apps that also refer to different chunks of your assets which you already defined with your entrypoints.

Copying an index.html file or even generating one with references to these entrypoints is not handled by the entrypoint mechanism - it is the other way round. A basic approach for handling html pages is using the html-webpack-plugin which not only can copy html files but also has an extensive mechanism for templating. This is especially helpful if you want to have your bundles suffixed with a bundle hash that is pretty to avoid browser caching issues when you update your app.

As you have defined a name pattern as [id].bundle_[chunkhash].js you can no longer reference your javascript bundle as main.bundle.js as it will be called something like main.bundle_73efb6da.js.

Have a look at the html-webpack-plugin. Especially relevant for your use case:

You should probably have something like that in the end (warning: not tested)

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'src/index.html',
    chunks: ['main']
  }),
  new HtmlWebpackPlugin({
    filename: 'example.html',
    template: 'src/example.html',
    chunks: ['exampleEntry']
  })
]

Please be aware to reference the name of the entrypoint in the chunks array, so in your example this should be exampleEntry. Probably it's also a good idea to move your templates into a specific folder instead of having them in directly inside the root src folder.

edited Dec 23, 2022 at 9:16

starball♦

59.5k52 gold badges313 silver badges1k bronze badges

answered Oct 2, 2016 at 11:35

Andreas Jägle

12.4k3 gold badges33 silver badges33 bronze badges

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

4 Comments

klewis Over a year ago

Good explanation but it still bothers me that you have to call 'new HTMLWebPlugin ' for every different page you create in your project.

Tahazzot Over a year ago

Everyone does not like to call the 'new HTMLWebPlugin' each of the pages. Need alternative.

Stephen Over a year ago

@Tahzzot then write a loop, the config file is just Javascript!

Philip Over a year ago

where/how do you specifiy [id].bundle_[chunkhash].js

RICHARD ABRAHAM · Accepted Answer · 2020-08-12 22:03:31Z

53

To use Multiple HTML files in `Webpack` using HtmlWebpackPlugin :

Modify the webpack.config.js by directly embedding the below code.

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

let htmlPageNames = ['example1', 'example2', 'example3', 'example4'];
let multipleHtmlPlugins = htmlPageNames.map(name => {
  return new HtmlWebpackPlugin({
    template: `./src/${name}.html`, // relative path to the HTML files
    filename: `${name}.html`, // output HTML files
    chunks: [`${name}`] // respective JS files
  })
});

module.exports = {
  entry: {
    main: './js/main.js',
    example1: './js/example1.js',
    //... repeat until example 4
  },
  module: { 
       //.. your rules
  };
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      chunks: ['main']
    })
  ].concat(multipleHtmlPlugins)
  
};

You can add as many HTML pages as required to the htmlPageNames array. Ensure that each HTML and corresponding JS file have the same name (The above code assumes that).

answered Aug 12, 2020 at 22:03

RICHARD ABRAHAM

2,58825 silver badges27 bronze badges

4 Comments

kyw Over a year ago

I had to do excludeChunks: ["main"] to prevent bundle meant for my index.html from appearing in my other html too.

Shraddha Over a year ago

Thank you so much. This worked for me with the changes that @kyw suggested and also, by using placeholder in output, like so: output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js', publicPath: '' },

iChido Over a year ago

This is a great approach. But it's not working for me. I keep getting the message: Multiple assets emit different content to the same filename index.html Any ideas what's happening to my file?

iChido Over a year ago

I'm answering my own question now. I discovered that using the filename is a "must have"!

F Lekschas · Accepted Answer · 2018-05-17 18:33:33Z

6

You can also use Copy Webpack Plugin if you don't need two different builds, i.e., assuming that you just want to serve a different HTML with the same main.bundle.js.

The plugin is really dead simple (only tested in webpack v4):

const CopyWebpackPlugin = require('copy-webpack-plugin');

const config = {
  plugins: [
    new CopyWebpackPlugin([
      { from: './src/example.html', to: './example.html' }
    ])
  ]
}

Then in example.html you can load the build from index.html. E.g.:

<!DOCTYPE html>
<html
<head>
    ...
    <title>Example</title>
</head>
<body>
    <div id="container"> Show an example </div>
    <script src="main.bundle.js"></script>
</body>
</html>

answered May 17, 2018 at 18:33

F Lekschas

12.9k12 gold badges67 silver badges75 bronze badges

2 Comments

Sritam Jagadev Over a year ago

is there any other way possible to use CopyWebpackPlugin and add bundle.js file to html file through webpack instead of directly giving script reference in the html file itself ?

Thomas Over a year ago

@SritamJagadev No, CopyWebpackPlugin just copies files literally. You need WebpackHtmlPlugin if you want to modify the HTML, like injecting script tags.

Akif Kara · Accepted Answer · 2021-06-10 22:08:19Z

3

RICHARD ABRAHAM's solution worked well for me i also added fsreaddir function for detect html files

let htmlPageNames = [];
const pages = fs.readdirSync('./src')
pages.forEach(page => {
    if (page.endsWith('.html')) {
        htmlPageNames.push(page.split('.html')[0])
    }
})
console.log(htmlPageNames);

answered Jun 10, 2021 at 22:08

Akif Kara

7278 silver badges14 bronze badges

Comments

rottitime · Accepted Answer · 2022-05-11 16:24:54Z

3

Going back to @andreas-jägle point. Use 'html-webpack-plugin':html-webpack-plugin html-webpack-plugin. However optimise your code to avoid duplication of files:

  plugins: ['index', 'page1', 'page2'].map(
    (file) =>
      new HtmlWebpackPlugin({
        template: './src/' + file + '.html',
        inject: true,
        chunks: ['index', 'main'],
        filename: './' + file + '.html' //relative to root of the application
      })
  )

answered May 11, 2022 at 16:24

rottitime

2,4972 gold badges23 silver badges37 bronze badges

Comments

Pavel Rodionov · Accepted Answer · 2020-11-08 03:05:41Z

1

plugins: [
  ...templates.map(template => new HtmlWebpackPlugin(template))
]

This code would help if you have a lot of templates :)

answered Nov 8, 2020 at 3:05

Pavel Rodionov

531 silver badge9 bronze badges

2 Comments

RockyK Over a year ago

Can you write out the whole code? It's not really clear.

Pavel Rodionov Over a year ago

@RockyKev I don't remember the context, but the main point is to have a variable to store information about your templates. Then you can run your templates trough webpack and compile them if you need to. ` const templates = [ { template: './src/hbs/pages/index.hbs', filename: './index.html' }, { template: './src/hbs/pages/index.hbs', filename: './articles/index.html' } ]` (sorry for bad formatting)

biodiscus · Accepted Answer · 2024-02-19 20:14:12Z

in 2024 can be used the html-bundler-webpack-plugin instead of html-webpack-plugin. This plugin extracts JS, CSS, assets from source files used in HTML. Using this plugin, the entrypoint is the HTML file and all used source resources are extracted automatically.

You can load individual source scripts, styles and images directly in HTML. The path to source file must be relative by HTML file or an Webpack alias.

index.html

<!DOCTYPE html>
<html
<head>
    ...
    <!-- load source file of style -->
    <link rel="stylesheet" href="./style/default.scss">
</head>
<body>
    <h1>Home</h1>
    <!-- load source file of image -->
    <img src="./images/homepage.png">
    <!-- load source file of script -->
    <script src="./js/main.js"></script>
</body>
</html>

example.html

<!DOCTYPE html>
<html
<head>
    ...
    <!-- load source file of style -->
    <link rel="stylesheet" href="./style/default.scss">
</head>
<body>
    <h1>Example</h1>
    <!-- load source file of script -->
    <script src="./js/example.js"></script>
</body>
</html>

Install plugin:

npm install html-bundler-webpack-plugin --save-dev

Change your webpack.config.js according to the following minimal configuration:

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

module.exports = {
  output: {
    path: path.join(__dirname, 'dist/'),
    publicPath: '/',
  },

  entry: {
    // define HTML files here
    index: './src/index.html',  // => dist/index.html
    example: './src/example.html', // => dist/example.html
    // ...
  },

  plugins: [
    new HtmlBundlerPlugin({
      js: {
        // JS output filename extracted from source script loaded in HTML via `<script>` tag
        filename: 'js/[name].[contenthash:8].js',
      },
      css: {
        // CSS output filename extracted from source style loaded in HTML via `<link>` tag
        filename: 'css/[name].[contenthash:8].css',
      },
    }),
  ],

  module: {
    rules: [
      // styles
      {
        test: /\.(css|sass|scss)$/,
        use: ['css-loader', 'sass-loader'],
      },
      // images
      {
        test: /\.(png|jpe?g|svg|ico)/,
        type: 'asset/resource',
        generator: {
          filename: 'img/[name].[hash:8][ext]',
        },
    },
    ],
  },
};

The generated HTML contains output hashed filenames. Source styles, scripts and images are automatically processed and placed in the output directory dist/.

The generated index.html:

<!DOCTYPE html>
<html>
<head>
    ...
    <link href="/assets/css/default.f57966f4.css" rel="stylesheet">
</head>
<body>
    <h1>Home</h1>
    <img src="/assets/img/homepage.d2f4b855.png">
    <script src="/assets/js/main.b855d8f4.js"></script>
</body>
</html>

Note

No longer needed to import styles in JavaScript.
No longer needed to define a JS file as the entrypoint.
Now it works intuitively, right in the HTML.

Alex Nolasco · Accepted Answer · 2024-04-01 21:05:19Z

There is another solution, assuming Webpack ^4.44.1. That is, importing the HTML in your JS/TS app.

Sample webpack.config.js

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
    
    
    module.exports = {
        entry: { app: './src/index.ts' },
    
        mode: 'development',
        devtool: 'inline-source-map',
        plugins: [
            new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({
                title: 'Development',
                template: path.join(path.resolve(__dirname, 'src'), 'index.ejs')
            }),
        ],
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    use: 'ts-loader',
                    include: [path.resolve(__dirname, 'src')],
                    exclude: /node_modules/,
                },
                {
                    test: /\.html$/i,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]'
                            }
                        }
                    ],
                    // this exclude is required
                    exclude: path.join(path.resolve(__dirname, 'src'), 'index.html')
                }
            ],
        },
        resolve: {
            extensions: ['.ts', '.js'],
        },
        devServer: {
            contentBase: path.join(__dirname, 'dist'),
            compress: true,
            port: 3900
        },
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist'),
        },
    };

Corresponding app

import './about.html';
    
console.log('this is a test');

index.ejs

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Question</title>
    </head>
    <body>
         <a href="./about.html">About</a>
    </body>
    </html>

about.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>About</title>
    </head>
    <body>
        <p>This is an about page</p>
    </body>
    </html>

Webpack will copy about.html to the corresponding output folder.

Collectives™ on Stack Overflow

Multiple html files using webpack

8 Answers 8

4 Comments

To use Multiple HTML files in `Webpack` using HtmlWebpackPlugin :

4 Comments

2 Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

4 Comments

To use Multiple HTML files in Webpack using HtmlWebpackPlugin :

4 Comments

2 Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

To use Multiple HTML files in `Webpack` using HtmlWebpackPlugin :