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"
}

Pernell

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"
    ]
  }

Oust

Answer 2

this question is old, but you needing delete "'html-loader'" of rules for working

Merciless