chore: adapt for using with pug-plugin

[webdiscus]

trafficstars

Hi,

I have optimised this repo for using with Webpack 5 and pug-plugin. Since Webpack 5 can be used the clever pug-plugin.

Pug plugin is designed for easily usage Pug and replaces functionality of many plugins and loaders such as:

• html-webpack-plugin
• mini-css-extract-plugin
• pugjs/pug-loader and others same loaders

The philosophy of Pug plugin:

• the entry point is the Pug template, not the JavaScript file
• source scripts and styles should be used directly in Pug without having to define theirs in the webpack config

See please the diff, how Webpack config has become smaller, clear and clean.

How easy to use the Pug plugin

Specify the Pug files in the Webpack entry:

const PugPlugin = require('pug-plugin');
module.exports = {
  entry: {
    index: './src/views/home/index.pug',  // output dist/index.html
    about: './src/views/about/index.pug', // output dist/about.html
  },
  plugins: [
    new PugPlugin(), // enable processing of Pug files specified in Webpack entry
  ],
  module: {
    rules: [
      {
        test: /.pug$/,
        loader: PugPlugin.loader, // Pug loader
      },
    ],
  },
};

Add source scripts and styles directly to Pug using require():

link(href=require('./styles.scss') rel='stylesheet')
script(src=require('./main.js'))

Generated HTML contains hashed CSS and JS output filenames:

<link href="/assets/css/styles.05e4dd86.css" rel="stylesheet">
<script src="/assets/js/main.f4b855d8.js"></script>

P.S. Before accept or cancel the PR, try please the version with pug-plugin from pug-plugin branch.