Webpack Config for Static Pug/HTML Pages

Question

I'm transitioning a site to use Webpack, and I need a little help with configuration. I have a few pages written in Pug/Jade that are large and infrequently accessed (think Terms of Service or Privacy Policy). Most of my .jade files are Angular templates, so those are inlined in their components and it works well. These few files, however, I would like Webpack to compile into static HTML files served separately from the rest of the app. However, I would still like their file names to include a hash.

The basic idea I've come up with is like this:

In routes.ts:

$routeProvider.when('/_tos', templateUrl: require('./resources/terms-of-service.jade'))

In webpack.config.js's list of loaders:

{
  test: /resources.*\.jade$/,
  loaders: ['file?name=[name].[hash].html', 'pug-html']
}

I've tried that with various combinations of pug-loader, pug-html-loader (with and without the ?exports=false option), html-loader, extract-loader, extract-text-webpack-plugin, and file-loader, but everything I try has extra artifacts in the resulting .html file. E.g. it might start with module.exports =, or it might put \" everywhere in the file that should just have ".

Can anyone help?

score 1 · Accepted Answer · answered Nov 12 '16 at 17:58

Gah! I finally figured it out. I fundamentally misunderstood the way the list of loader works. I assumed only the first loader in the array that matched was used, but no, all loaders that match are used. (Though I'm still fuzzy on the details.) Here is a working configuration, where resources is the path to my "resources" directory:

loaders: [
  {
    test: /\.jade$/,
    include: [resources],
    loaders: ['file?name=[name].[hash].html', 'pug-html?exports=false']
  },
  {
    test: /\.jade$/,
    exclude: [resources],
    loaders: ['pug-html?doctype=html']
  }
]

Webpack Config for Static Pug/HTML Pages

1 Answers1