chore: optimize code and config for pug-plugin

[webdiscus]

Hello,

I'm the author of the webpack-remove-empty-scripts that you use in Webpack. I will demonstrate the new pug-plugin how much easy to compile Pug templates using pug-plugin than with "old way" using the html-webpack-plugin, pug-loader, etc.

Just one Pug plugin replaces the functionality of many plugins and loaders used with Pug:

• html-webpack-plugin
• mini-css-extract-plugin
• webpack-remove-empty-scripts
• pug-loader

Using the pug-plugin:

• the Entrypoint is the Pug file, not JS-file
• all source scripts (JS/TS) must be loaded via require() directly in Pug file, not in Webpack entry
• all source styles (CSS/SASS/SCSS) must be loaded via require() directly in Pug file, not in JS file or Webpack entry
• all source images must be used via require() in Pug

Specify the Pug files in the Webpack entry:

const PugPlugin = require('pug-plugin');
module.exports = {
  output: {
    path: path.join(__dirname, "./dist"),
    filename: "js/[name].[contenthash:8].js",
  },
  entry: {
    // define your Pug files here
    index: './src/views/home/index.pug',  // output dist/index.html
    about: './src/views/about/index.pug', // output dist/about.html
  },
  plugins: [
    // enable rendering of Pug files defined in Webpack entry
    new PugPlugin({
       extractCss: {
        filename: "css/[name].[contenthash:8].css", // hashed output filename of CSS
      },
    }),
  ],
  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>

You can try it yourself the demo-pug-plugin branch.

Note: use please the npm instead of yarn:

npm i

Start local development in Browser with HMR and live reload:

npm start

Build production:

npm run build

P.S.: please, see my comments in the code.