Como agregar múltiples páginas html con Webpack

Es un poquito laborioso (solo un poquito). ahí te va el tuto:

Lo logras usando el plugin de webpack “html-webpack-plugin”: html-webpack-plugin

El proceso es así: Tu traes cada index.js de cada una de tus páginas como entry points, luego creas los outputs dinámicamente por cada uno, y con el plugin mencionado puedes hacer 2 cosas:

1. Inyectar el bundle generado a cada html.
2. llamar manualmente tus scripts en el html. me explico.

para que tu llames un script en tu html haces:

<script src="js/index.js"></script> 

cuando haces inyección, lo que sucede es que webpack crea esta línea en tu código dinámicamente. Si tu index.js se convirtió en index.bundle.js, webpack pone esto en tu html template, y lo pone con la ruta exacta:

<script src="js/index.bundle.js"></script> 

Nota: Un bundle es cuando tus scripts son compactados mediante webpack en un solo script.

Dicho todo esto, ahora puedo pasar a explicar con código como lograrlo:

Método de Inyección de templates

enlace de referencia

documentación oficial del plugin

//...
entry: {
  // llamado de cada script para convertilos en bundles únicos
    index: './src/index.js',
    about: './src/about.js', 
    contacts: './src/contacts.js'
},
 output: {
  // output dinámico de cada bundle
    path: __dirname,
    filename: "public/[name]/[name].bundle.js"
  },
//...
plugins: [
  // inyección del template de index
  new HtmlWebpackPlugin({
        template: './src/index.html',
        inject: true,
        chunks: ['index'],
        filename: 'public/index/index.bundle.js'
    }),
  // inyección del template de about
  new HtmlWebpackPlugin({
      template: './src/about.html',
      inject: true,
      chunks: ['about'],
      filename: 'public/about/about.bundle.js'
  }),
  // inyección del template de contacts
  new HtmlWebpackPlugin({
      template: './src/contacts.html',
      inject: true,
      chunks: ['contacts'],
      filename: 'public/contacts/contacts.bundle.js'
  }),
  // ...
]
//...

explicación: es sencillo. aquí tu tienes 3 páginas de html (index, about y contact); cada una tiene su propio script. En los entrys llamas a todos tus scripts, en output creas un bundle único por cada entry, y en los plugins enlazas cada bundle con tu html (que se considera un template cada uno aquí). Se enlazan con el atributo chunks, que si te fijas lleva el nombre que le diste a tu entry point.