title: How to create multiple pages in Webpack?
body: <p>This may seem like an amateur questions but I am having trouble creating other pages with Webpack</p>
  
  <p>Here is my webpack.config.js file</p>
  
  <pre><code>var HtmlWebpackPlugin = require('html-webpack-plugin')
  var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin')
  var ExtractTextPlugin = require('extract-text-webpack-plugin')
  var webpack = require('webpack')
  var path = require('path')
  
  var isProd = process.env.NODE_ENV === 'production' // true or false
  var cssDev = ['style-loader', 'css-loader', 'sass-loader']
  var cssProd = ExtractTextPlugin.extract({
    fallback: 'style-loader',
    loader: ['css-loader', 'sass-loader'],
    publicPath: '/dist'
  })
  var cssConfig = isProd ? cssProd : cssDev
  
  module.exports = {
    entry: {
      app: './src/app.js'
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].bundle.js'
    },
    module: {
      rules: [
        {
          enforce: 'pre',
          test: /\.js$/,
          use: 'eslint-loader',
          exclude: /node_modules/
        },
        {
          test: /\.scss$/,
          use: cssConfig
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: 'babel-loader'
        },
        {
          test: /\.pug$/,
          use: 'pug-loader'
        }
      ]
    },
    devServer: {
      contentBase: path.join(__dirname, 'dist'),
      compress: true,
      hot: true,
      open: true
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: 'Project Demo',
        hash: true,
        alwaysWriteToDisk: true,
        template: './src/index.pug'
      }),
      new HtmlWebpackHarddiskPlugin(),
      new ExtractTextPlugin({
        filename: 'app.css',
        disable: !isProd,
        allChunks: true
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin()
    ]
  }
  </code></pre>
  
  <p>Basically, my config file is currently uses <code>HtmlWebpackPlugin</code> to <strong>input</strong> my <code>index.pug</code> from the <code>src</code> folder then <strong>outputs</strong> <code>index.html</code> into the <code>dist</code> folder.</p>
  
  <p>However, what if I want to create different pages? For example, an about page. </p>
  
  <p>I know that if I create a <code>about.pug</code> in my <code>src</code> folder, it will not be processed by Webpack because I have included it in my configuration file. However, I am not sure how to accomplish this.</p>
  
  <p>How could I <strong>input</strong> different pug files such as <code>about.pug</code> <code>gallery.pug</code> <code>contact.pug</code> in my <code>src</code> folder then have all these <strong>output</strong> in my <code>dist</code> folder as <code>about.html</code> <code>gallery.html</code> <code>contact.html</code></p>