Configuring Pug with Webpack 4 and the Aurelia CLI
This post shows my effort so far to configure pug on top of a new webpack4-based Aurelia project. There are two outstanding issues that I have not yet resolved:
- Pug file
requirestatements are not resolving the css file (e.g.
- Have not yet tackled the issue of passing
pug is needed to process pug files, and pug-loader is needed to load pug files into webpack. apply-loader is needed because pug-loader uses a function (if anyone can add a better description, please do).
yarn add -D pug-loader
Within the webpack.config.js
module.rules array you’ll need to add the following.
Most loaders return a string result, but pug-loader returns a function that returns the
string result. apply-loader will execute the pug-loader function.
TODO: determine how to pass parameters/locals to pug-loader
And within the list of plugins you’ll need to
- configure webpack to load your index.pug file rather than the Aurelia CLI default index.ejs file
- tell Aurelia that your view files are .pug files
Converting the default index.ejs to index.pug requires access to the metadata variables added above.
In pug these are attached to
Pug evals anything within
}`, so you can see what variables are available by using
It works out that our metadata is actually attached to
NOTE: Attaching to locals is not yet working. I’ll update this when I figure out how to get this working.
The resultant index.pug is here. Note that I’ve added a few additional script includes for illustrative purposes.
- var metadata = locals.htmlWebpackPlugin.options.metadata
A bit of additional config to associate views with pug.
var Promise = require('bluebird') // Promise polyfill for IE11;
This isn’t everything you need to know. You’ll also need to declare global components using
my-component.pug rather than
my-component.html in cases where there is not an associated .js file.
You can read more about this in my next blog post.