Check on this post the step-by-step you need to configure Sass & Pug.js (previously know as JADE) in Webpack 5 with HMR fully working.
π¨π»βπ» Initialize your project with Webpack 5:
1- Create the package.json for your project:
yarn init -y
2- Install webpack together with his CLI and dev-server:
yarn add webpack webpack-cli webpack-dev-server -D
/* βπ½ The -D flag install these as a devDependency.
Since webpack already compiles & bundle our app for build. */
π¨ Configuring Sass & Pug.js on Webpack:
1- Install the needed Sass dependencies:
yarn add sass sass-loader css-loader -D
2- Install the needed Pug dependencies:
yarn add pug-plugin -D
3- With 'pug-plugin' you can insert your Images, Styles, Fonts & Scripts inside any pug file. With no need to use "require()" in front of href or src path anymore:
4- To make it all work, create a "webpack.config.js" file on the root of your project, & add the following settings on it:
//webpack.config.js
const path = require('path');
const PugPlugin = require('pug-plugin');
module.exports = {
output: {
path: path.join(__dirname, 'dist/'),
publicPath: '/',
},
plugins: [
new PugPlugin({
pretty: 'auto',
//βπ½ Format HTML (only in dev mode)
entry: {
// Insert your PUG templates here
index: './src/views/index.pug',
about: './src/views/about.pug'
},
js: {
// JS output filename with hash for unique id
filename: 'assets/js/[name].[contenthash:8].js'
},
css: {
// CSS output filename with hash for unique id
filename: 'assets/css/[name].[contenthash:8].css'
}
})
],
module: {
rules: [
{
test: /\.(css|sass|scss)$/,
use: ['css-loader', 'sass-loader']
//βπ½ Load Sass files
},
{
// To use images on pug files:
test: /\.(png|jpg|jpeg|ico)/,
type: 'asset/resource',
generator: {
filename: 'assets/img/[name].[hash:8][ext]'
}
},
{
// To use fonts on pug files:
test: /\.(woff|woff2|eot|ttf|otf|svg)$/i,
type: 'asset/resource',
generator: {
filename: 'assets/fonts/[name][ext][query]'
}
}
]
},
devServer: {
static: path.join(__dirname, 'dist'),
watchFiles: {
paths: ['src/**/*.*', 'assets/scss/**/*.*'],
//βπ½ Enables live reload in these folders
options: {
usePolling: true
}
}
},
stats: 'errors-only'
//βπ½ For a cleaner dev-server run
};
5- Add your Pug files on entry (inside module.exports) & you're ready to go! (you can add more files there later). π The HMR will work for any Pug that imports at least 1 Js file, & all Sass files inside 'src' or 'assets' folderβ ππΌ
π Last but not less important:
You can customize your webpack.config.js and delete or insert anything you like. The code up here it's based on the pug-plugin instructions.
Top comments (10)
@all
ATTENTION
In 2024 was released the pug-plugin
v5
.NEW version has a lot new cool features and many changes.
Thanks man!! I really appreciate that you have remembered this article and commented to keep it up to date!
I'll definitely update this article and the repo with your pull request to include the new version :) Thanks a lot mate! π«Άπ»
Thanks for a very good step by step guide.
I have one note:
to install Pug dependencies is enough one "pug-plugin", without "pug" module, because "pug-plugin" already contain the "pug" module.
Hey mate! Oh thank u so much bro :)
Got it! I will edit the step by step using your note, thanks for the advice! All the best π
Hi, thanks for your article.
There is one problem, live reload works fine, but HMR does not work. For example, I edit some scss-file and after saving the entire page is reloaded, but in a good way this should not be.
github.com/webdiscus/pug-plugin#hm... - this part doesn`t help
Thank you bro!
Can somebody help please? I am a real beginner, did everything like you wrote above, but it still does not work... Where do I put my pug index file and SASS while? It does not compile it on save...
Hi Nikita! All nice? Of course I can help, you can check how I structured my project on my GitHub repo: github.com/Thiagoow/LayoutsUI-PugH...
About compiling when you save, this feature is know as Hot Module Reload, or HMR, in the fifth step of this article I explain that it works for all the pug files that import at least 1 JS file :)
Good luck with your own project, and happy coding! ππ₯³
Nice article!
Thank you a lot mate! π€©π₯³