How to output html files from pug templates with webpack?

Question

I'm trying to output individual html files from pug templates in my webpack project. The problem I'm having is in getting pug-loader to render html into the files.

My webpack.config:

const path = require('path');
const glob = require('glob');
const webpack = require('webpack');

const src = path.resolve(__dirname, 'src');
const dist = path.resolve(__dirname, 'dist');

module.exports = {
  context: src,

  entry: {
    pug: glob.sync('./**/*.pug', {
      cwd: src
    }),
    index: path.resolve(src, 'index.js')
  },

  output: {
    path: dist,
    filename: '[name].js'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015'].map(dep =>
              require.resolve(`babel-preset-${dep}`)
            ) // Fix for lerna symlinked deps
          }
        }
      },
      {
        test: /\.pug$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].html'
            }
          },
          'extract-loader',
          'html-loader',
          'apply-loader',
          'pug-loader'
        ]
      }
    ]
  }
};

This correctly generates files for each pug template in my project, but the files do not contain html. Rather, each file looks something like:

var req = require("!!<absolute-path-to-project>/node_modules/pug-loader/index.js!<absolute-path-to-pug-file>/index.pug");
module.exports = (req['default'] || req).apply(req, [])

My installed dependency versions:

{
  "apply-loader": "^2.0.0",
  "babel-core": "^6.25.0",
  "babel-loader": "^7.1.0",
  "babel-preset-es2015": "^6.24.1",
  "extract-loader": "^0.1.0",
  "file-loader": "^0.11.1",
  "glob": "^7.1.2",
  "html-loader": "^0.4.5",
  "pug-loader": "^2.3.0",
  "webpack": "^3.0.0"
}

Answer 1

Try to use pug-html-loader instead of pug-loader.

Here an example:

{
    test: /\.pug$/,
    use: [
      "file-loader?name=[path][name].html",
      "extract-loader",
      "html-loader",
      "pug-html-loader"
    ]
  }