refactor: optimise code and config for new pug-plugin

[webdiscus]

Hello @MetaLamp school,

I'm the author of the pug-plugin that many of your students are incorrectly setting up in the Webpack of the learn project named as MetaLamp or Toxin. These projects are cloned from frontend-intership-toxin.

I will demonstrate how to correct configure the Webpack and use the pug-plugin.

Using pug-plugin the compilation is 3x faster:

• pug-plugin only 3 sec
• html-webpack-plugin + mini-css-extract-plugin + pug-loader > 9 sec

Compiling Pug with pug-plugin is much easy than with "old way" using the html-webpack-plugin.

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

• html-webpack-plugin - it is designed not for Pug
• mini-css-extract-plugin - used to import styles in JavaScript to inject CSS in HTML
• pug-loader - is outdated and not maintained more

Using the pug-plugin:

• the Webpack entry-point is the Pug file, not JS-file
• all source scripts (JS/TS) should be specified directly in Pug, in script tag, not in Webpack entry
• all source styles (CSS/SASS/SCSS) can be specified directly in Pug, in link tag, or imported in JS
• compiling is faster

You can clone & try the updated version from my fork:

git clone https://github.com/webdiscus/frontend-intership-toxin.git
cd frontend-intership-toxin
git checkout new-pug-plugin

npm i -f
npm start

P.S. for any question I will help you