How to use Pug & Sass in Webpack 5 - 2022 🐶
Tags: webdev, tutorial, beginners, html
Published: 2022-08-04 21:30:00


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`
```javascript
/* ☝🏽 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:
![Pug code Snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/at95j2agpomnxfs4sqky.jpg)
 
4- To make it all work, create a "webpack.config.js" file on the root of your project, & add the following settings on it:

```javascript
//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](https://github.com/webdiscus/pug-plugin).