title: Pug + webpack-dev-server
body: <p>I'm using webpack v4 and I'm trying to use <code>Pug</code> with <code>webpack-dev-server</code> but when I run <code>webpack-dev-server --mode development</code> it doesn't serve compiled <code>Pug</code>. Please, help. I don't know what to do. Thanks for reply. Here is my config: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    entry: './src/js/main.js',
    output: {
      path: path.join(__dirname, 'dist'),
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        },
        {
          test: /\.pug$/,
          use: {
            loader: 'pug-loader',
            options: {
              pretty: true
            }
          }
        }
      ]
    },
    devServer: {
      contentBase: path.join(__dirname, 'dist'),
      hot: true,
      open: true,
      progress: true
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: path.join(__dirname, 'src/templates/pages/index.pug'),
        inject: false
      })
    ]
  };</code></pre>
  </div>
  </div>
  </p>