title: Webpack 4 | pug files doesn't compile automatically
body: <p>I am working on a project in which I am using Pugjs as a template engine.
  and webpack 4 as a bundler.</p>
  
  <p>when I change anything in the <code>.pug</code> files I have to re-run the compiler manually.</p>
  
  <p>any help on how I can set it so the compiler run once I edit the files ?.</p>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const WebpackMd5Hash = require('webpack-md5-hash');
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  
  
  module.exports = {
  entry: {
      main: './src/index.js'
  },
  output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].[chunkhash].js'
  },
  module: {
      rules: [
          {
              test: /\.scss$/,
              use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
          },
          {
              test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
              exclude: [/images/],
              use: [{
                  loader: 'file-loader',
                  options: {
                      name: '[name].[ext]',
                      outputPath: './assets/fonts/'
                  }
              }]
          },
          {
              test: /\.(png|svg|jpg|gif)$/,
              exclude: [/fonts/],
              use: {
                  loader: 'file-loader',
                  options: {
                      outputPath: './assets/images/',
                      name: '[name].[ext]',
                  }
              }
          },
          {
              test: /\.js$/,
              exclude: /node_modules/,
              use: {
                  loader: "babel-loader"
              }
          },
          {
              test: /\.pug$/,
              use: ['html-loader?interpolate', 'pug-html-loader']
          }
      ]
  },
  plugins: [
      new CleanWebpackPlugin('dist', {}),
      new MiniCssExtractPlugin({
          filename: 'style.[contenthash].css',
      }),
  
      new HtmlWebpackPlugin({
          // inject: false,
          hash: true,
          template: './src/index.pug',
          filename: 'index.html',
          title:'home'
      }),
      new HtmlWebpackPlugin({
          filename: 'contact.html',
          hash: true,
          template: './src/contact.pug',
          // inject: false,
          title: 'contact'
      }),
      new WebpackMd5Hash()
   ]
  };
  </code></pre>
  
  <p><strong>update 1</strong>
  it works fine when I use <code>webpack</code> command but it doesn't create the dev server for sue
  but when I use <code>webpack-dev-server</code> it create the server but dist folder didn't created without errors in the terminal! </p>