html-webpack-plugin with pug-loader not picking up options

Question

Consider:

plugins: [
  new HtmlWebpackPlugin({
    template: 'index.pug',
    title: 'Page Title',
    custom: 'Custom'
  })
]

Inside index.pug:

doctype html
html
  head
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible" content="IE=edge")
    meta(name="viewport" content="width=device-width, initial-scale=1")
    title= htmlWebpackPlugin.options.title

I would expect the custom title to get picked up, but it outputs the default Webpack App instead (and the custom variable is undefined).

webpack 1.15.0
html-web-pack-plugin 2.30.1
pug 2.0.0-rc.4

I'm at my wits' end here, and I get the feeling it's something obvious I missed.

It only supports `ejs` by default. But you can config to use another loader — Quoc-Anh Nguyen, Sep 26 '17 at 06:15

score 1 · Accepted Answer · answered Sep 26 '17 at 06:16

1

You have to change your config to:

plugins: [
  new HtmlWebpackPlugin({
    template: '!!pug-loader!index.pug',
    title: 'Page Title',
    custom: 'Custom'
  })
]

Read more about this https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md#2-setting-a-loader-directly-for-the-template

answered Sep 26 '17 at 06:16

Quoc-Anh Nguyen

4,798
1
22
34

And also, I was only reloading the dev-server, and not the watcher, so my config changes weren't being picked up at all... duh! – Ivan Sep 26 '17 at 06:18
My suggestion about this problem is you should use some file watcher (nodemon, ...) to reload when you have a new config. – Quoc-Anh Nguyen Sep 26 '17 at 06:21

html-webpack-plugin with pug-loader not picking up options

1 Answers1