Is it for a single page sites?

[NikitaVlaznev]

Otherwise it would be helpful to add one more page as an example.

[mardorfv]

Yes, a multiple page example would be useful for me as well. I've been using this to setup marketing landing pages. It would be much better if I could organize them into a site.

[alexnoz]

There is an abstraction for that in webpack.parts.js file.
So, assuming you have the following folder structure:

app/
|-index.pug
|-index.js
|
|-about/
|   |-about.pug
|   |-index.js
|
...

You can use it like this:

// webpack.config.js
// Call `parts.page` for each page with necessary options
const pages = [
  parts.page({
    title: 'Home',
    entry: {
      home: paths.app
    },
    template: path.join(paths.app, 'index.pug'),

    // `runtime` and `vendors` are shared between all pages
    chunks: ['home', 'runtime', 'vendors']
  }),
  parts.page({
    title: 'About',
    path: 'about',
    entry: {
      about: path.join(paths.app, 'about')
    },
    template: path.join(paths.app, 'about/about.pug'),

    // `runtime` and `vendors` are shared between all pages
    chunks: ['about', 'runtime', 'vendors']
  })
]

Now you need to merge these configuration parts into the final config, like this:

// webpack.config.js
module.exports = env => {
  process.env.NODE_ENV = env

  const config = env === 'production' 
    ? productionConfig 
    : developmentConfig

  // merge pages
  return merge(commonConfig, config, ...pages)
}

Then, in all index.js files:

// for live reloading
if (process.env.NODE_ENV !== 'production') {
  require('./path/to/page.pug');
}

Also, don't forget to remove HtmlPlugin from commonConfig. Hope this helps 🙂