Configuring Pug with Webpack 4 and the Aurelia CLI
Aurelia is a front-end framework along the lines of Angular and vuejs. The Aurelia CLI (currently v0.33.1) does not support pug templates. This post shows how to setup pug once you’ve installed a new webpack4-based Aurelia project.
I have two outstanding issues to get this to work:
- Pug file require statements are not resolving the css file (e.g.
- Have not yet tackled the issue of passing
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
The resultant index.pug is:
- var metadata = locals.htmlWebpackPlugin.options.metadata
NOTE: The above is incorrect, and locals are not yet passing into index.pug
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.