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. Just use "require()" in front of href or src path:
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 = {
entry: {
index: './src/views/index.pug',
about: './src/views/about.pug'
//☝🏽 Insert your PUG HTML files here
},
output: {
path: path.join(__dirname, 'dist/'),
publicPath: '/',
filename: 'assets/js/[name].[contenthash:8].js'
//☝🏽 Output filename of files with hash for unique id
},
plugins: [
new PugPlugin({
pretty: true,
//☝🏽 Format HTML (only in dev mode)
extractCss: {
filename: 'assets/css/[name].[contenthash:8].css'
}
})
],
module: {
rules: [
{
test: /\.pug$/,
loader: PugPlugin.loader
//☝🏽 Load Pug files
},
{
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: {
directory: path.join(__dirname, 'dist')
},
watchFiles: {
paths: ['src/**/*.*', 'assets/scss/**/*.*'],
//☝🏽 Enables HMR 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 (7)
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
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! 🤩🥳