Webpack - Generating multiple HTML files with different javascript script files

Question

I'm unable to create multiple Html files with separate javascript files in webpack.

I have set up multiple entries with output configured as [name].bundle.js. I'm also using multiple new HtmlWebpackPlugin() to create html files as well.

I am sure that this configuration is doing exactly what it is supposed to do, but I don't know how to configure it so that each javascript are referenced separately for its own html file. I couldn't find more information online and in documentations about this.

// webpack.config.js
module.exports = {
  ...
  entry: {
    background: './src/browser/chrome/background/index.js',
    panel: './src/browser/chrome/panel/index.js',
    popup: './src/browser/chrome/popup/index.js',
    devtools: './src/browser/chrome/devtools/index.js',
  },
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'js/[name].bundle.js',
    chunkFilename: '[id].chunk.js',
  },
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/browser/chrome/popup/index.html',
      filename: 'popup.html',
    }),
    new HtmlWebpackPlugin({
      template: './src/browser/chrome/devtools/index.html',
      filename: 'devtools.html',
    }),
    ...
  ],
  ...
}

// devtools.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  This is the dev tools page
  <script type="text/javascript" src="js/background.bundle.js"></script>
  <script type="text/javascript" src="js/panel.bundle.js"></script>
  <script type="text/javascript" src="js/popup.bundle.js"></script>
  <script type="text/javascript" src="js/devtools.bundle.js"></script>
</body>
</html>

Phil.hsu · Accepted Answer · 2019-06-12 03:28:52Z

1

You can do this with multiple pages, config the modules entry and entries

const appConfig = {
  entry: {
    background: './src/browser/chrome/background/index.js',
    panel: './src/browser/chrome/panel/index.js',
    popup: './src/browser/chrome/popup/index.js',
    devtools: './src/browser/chrome/devtools/index.js',
  },
  port: 3002,
  entries: {
    background: {
      title: 'background',
      template: './src/browser/chrome/background/index.html',
      chunks: ['background','vendors'],
    },
    popup: {
      title: 'background',
      template: './src/browser/chrome/popup/index.html',
      chunks: ['popup','vendors'],
    },
  },

};

Then config the html-webpack-plugin

let plugins = []
_.each(appConfig.entries, (entryInfo, entryName) => {
  plugins.push(new HtmlWebpackPlugin({
    title: entryInfo.title,
    template: entryInfo.template,
    chunks: entryInfo.chunks,
    chunksSortMode: 'manual',
    inject: 'body',
    favicon: entryInfo.favicon,
    resources: entryInfo.resources
  }));
});

Then config the module and entry

let entry = _.reduce(appConfig.entry, (entries, entry, entryName) => {
  entries[entryName] = entry;
  return entries;
}, {});

module.export = {
  entry,
  plugins,
}

Done!!!

answered Jun 12, 2019 at 3:28

Phil.hsu

865 bronze badges

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

3 Comments

Joseph K. Over a year ago

Overall this worked! It needed a bit of adjustments. I added filename to HtmlWebpackPlugin to avoid from overwriting each outputs to index.html by default, changed resources to appConfig.entry[key] to use the entry as script url to inject into body, and used vanilla javascript instead of lodash for performance. Lastly, can you clarify a little bit about using chunks: ['background','vendors'] as a HtmlWebpackPlugin parameter, that second item vendors more specifically?

Phil.hsu Over a year ago

vendors are the common modules in you all entries, eg. JQuery|Loadash

Barleby Over a year ago

I also managed to make it work, but I'm working.in a multi page application and one annoying drawback is that every .html entry point I have needs a .js file (even if it's empty) in order to live-reload to refresh the browser if I change Sass, pug or any other file.

Collectives™ on Stack Overflow

Webpack - Generating multiple HTML files with different javascript script files

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related