Eric Simonton Eric Simonton - 22 days ago 13
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

.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?

Answer

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']
  }
]
Comments