Eric Simonton Eric Simonton - 1 year ago 327
AngularJS Question

Webpack Config for Static Pug/HTML Pages

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

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:


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

'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
option), html-loader, extract-loader, extract-text-webpack-plugin, and file-loader, but everything I try has extra artifacts in the resulting
file. E.g. it might start with
module.exports =
, or it might put
everywhere in the file that should just have

Can anyone help?

Answer Source

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']
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download