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 se

Answer 1

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).