refactor: optimise code and config for new pug-plugin

package.json

@@ -34,27 +34,24 @@
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-pug": "^1.2.4",
     "gh-pages": "^3.2.3",
-    "html-webpack-plugin": "^5.3.2",
-    "mini-css-extract-plugin": "^2.3.0",
-    "node-sass": "^6.0.1",
     "postcss": "^8.4.4",
     "postcss-loader": "^6.2.1",
     "postcss-preset-env": "^7.0.1",
     "prettier": "^2.4.0",
-    "pug": "^3.0.2",
-    "pug-loader": "^2.4.0",
-    "sass-loader": "^12.1.0",
+    "pug-plugin": "^5.0.0",
+    "sass": "^1.71.1",
+    "sass-loader": "^14.1.1",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^22.0.0",
     "stylelint-order": "^4.1.0",
     "stylelint-prettier": "^1.2.0",
     "stylelint-scss": "^3.20.1",
-    "webpack": "^5.52.1",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.2.1",
-    "webpack-merge": "^5.8.0"
+    "webpack": "^5.90.3",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.2",
+    "webpack-merge": "^5.10.0"
   },
   "dependencies": {
     "air-datepicker": "^2.2.3",

src/components/date-dropdown/DateDropdown.js

@@ -94,7 +94,9 @@ class DateDropdown {
   }
 
   isClickOnDateDropdown({ path }) {
-    return path.includes(this.container);
+    // TODO: fix - the path is always undefined!
+    // return path.includes(this.container);
+    return true;
   }
 
   toggle() {

src/layouts/main-layout.pug

@@ -15,14 +15,14 @@ html(lang="ru")
     title #{title}
     meta(name="description" content=description)
     meta(name="keywords" content=keywords)
-    link(rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-touch-icon.png")
-    link(rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png")
-    link(rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png")
+    link(rel="apple-touch-icon" sizes="180x180" href="@favicons/apple-touch-icon.png")
+    link(rel="icon" type="image/png" sizes="32x32" href="@favicons/favicon-32x32.png")
+    link(rel="icon" type="image/png" sizes="16x16" href="@favicons/favicon-16x16.png")
     link(rel="manifest" href="./assets/favicon/site.webmanifest")
-    link(rel="mask-icon" href="./assets/favicon/safari-pinned-tab.svg" color="#5bbad5")
+    link(rel="mask-icon" href="@favicons/safari-pinned-tab.svg" color="#5bbad5")
     meta(name="msapplication-TileColor" content="#da532c")
     meta(name="theme-color" content="#ffffff")
-
+    block script
   body
     .page-wrapper
       block header

src/layouts/ui-kit-layout.pug

@@ -9,14 +9,14 @@ html(lang="ru")
     meta(charset="UTF-8")
     meta(name="viewport" content="width=device-width, initial-scale=1.0")
     title #{title}
-    link(rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-touch-icon.png")
-    link(rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png")
-    link(rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png")
+    link(rel="apple-touch-icon" sizes="180x180" href="@favicons/apple-touch-icon.png")
+    link(rel="icon" type="image/png" sizes="32x32" href="@favicons/favicon-32x32.png")
+    link(rel="icon" type="image/png" sizes="16x16" href="@favicons/favicon-16x16.png")
     link(rel="manifest" href="./assets/favicon/site.webmanifest")
-    link(rel="mask-icon" href="./assets/favicon/safari-pinned-tab.svg" color="#5bbad5")
+    link(rel="mask-icon" href="@favicons/safari-pinned-tab.svg" color="#5bbad5")
     meta(name="msapplication-TileColor" content="#da532c")
     meta(name="theme-color" content="#ffffff")
-
+    block script
   body
     .page-wrapper
       block header

src/pages/error-page/error-page.pug

@@ -3,6 +3,9 @@ extends ../../layouts/ui-kit-layout.pug
 block variables
   - const title = "404"
 
+block script
+  script(src="./index.js" defer)
+
 block header
 block content
   .canvas-error

src/pages/landing-page/landing-page.pug

@@ -10,6 +10,9 @@ block variables
     const keywords = "жильё, проживание, Отель, Отели, специальные предложения,\
     пакеты услуг, предложения на выходные со скидками, специальные предложения."
 
+block script
+  script(src="./index.js" defer)
+
 block content
   main.landing
     .landing__container

src/pages/registration-page/registration-page.pug

@@ -10,6 +10,9 @@ block variables
     const keywords = "жильё, проживание, Отель, Отели, специальные предложения,\
     пакеты услуг, предложения на выходные со скидками, специальные предложения."
 
+block script
+  script(src="./index.js" defer)
+
 block content
   main.registration
     .registration__container

src/pages/room-details-page/room-details-page.pug

@@ -15,6 +15,9 @@ block variables
     const keywords = "жильё, проживание, Отель, Отели, специальные предложения,\
     пакеты услуг, предложения на выходные со скидками, специальные предложения."
 
+block script
+  script(src="./index.js" defer)
+
 block content
   .room-details
     .room-details__room-photo

src/pages/search-room-page/search-room-page.pug

@@ -11,6 +11,9 @@ block variables
     const keywords = "жильё, проживание, Отель, Отели, специальные предложения,\
     пакеты услуг, предложения на выходные со скидками, специальные предложения."
 
+block script
+  script(src="./index.js" defer)
+
 block content
   main.search-room.js-search-room
     .search-room__container

src/pages/sign-in-page/sign-in-page.pug

@@ -10,6 +10,9 @@ block variables
     const keywords = "жильё, проживание, Отель, Отели, специальные предложения,\
     пакеты услуг, предложения на выходные со скидками, специальные предложения."
 
+block script
+  script(src="./index.js" defer)
+
 block content
   main.sign-in
     .sign-in__container

src/pages/start-page/start-page.pug

@@ -4,6 +4,9 @@ include ../../components/menu-widget/menu-widget.pug
 block variables
   - const title = "Стартовая страница"
 
+block script
+  script(src="./index.js" defer)
+
 block header
 block content
   .start-page

src/pages/ui-kit-cards/ui-kit-cards.pug

@@ -9,6 +9,9 @@ include ../../components/date-dropdown/date-dropdown.pug
 block variables
   - const title = "Cards"
 
+block script
+  script(src="./index.js" defer)
+
 block header
   +ui-kit-header({ withGrayBackground: true })  
 

src/pages/ui-kit-colors-type/ui-kit-colors-type.pug

@@ -5,6 +5,9 @@ include ../../components/type/type.pug
 block variables
   - const title = "Colors & Type"
 
+block script
+  script(src="./index.js" defer)
+
 block content
   main.colors-type-page
     .colors-type-page__container

src/pages/ui-kit-form-elements/ui-kit-form-elements.pug

@@ -18,6 +18,9 @@ include ../../components/heading/heading.pug
 block variables
   - const title = "Form & Elements"
 
+block script
+  script(src="./index.js" defer)
+
 block content
   main.form-elements
     .form-elements__container

src/pages/ui-kit-headers-footers/ui-kit-headers-footers.pug

@@ -6,6 +6,9 @@ include ../../components/footer-mobile/footer-mobile.pug
 block variables
   - const title = "Headers & Footers"
 
+block script
+  script(src="./index.js" defer)
+
 block header
   +ui-kit-header({ withGrayBackground: true })  
 

webpack.config.js

@@ -1,64 +1,87 @@
-const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const { merge } = require('webpack-merge');
 const CopyPlugin = require('copy-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const PugPlugin = require('pug-plugin');
 const devServer = require('./webpack/devServer');
 const styles = require('./webpack/styles');
 const postcss = require('./webpack/postcss');
-const pug = require('./webpack/pug');
 const images = require('./webpack/images');
 const fonts = require('./webpack/fonts');
 const javaScript = require('./webpack/javaScript');
 const sourceMap = require('./webpack/sourceMap');
 
 const PAGES_DIR = path.resolve(__dirname, 'src/pages');
-const PAGES = fs
-  .readdirSync(PAGES_DIR)
-  .map((item) => item.replace(/\.[^/.]+$/, ''));
 const PATHS = {
   src: path.join(__dirname, './src'),
   dist: path.join(__dirname, './dist'),
-}
+};
 
 const devMode = process.env.NODE_ENV === 'development';
 const productionMode = !devMode;
 const filename = (ext) => (devMode ? `${ext}/[name].${ext}` : `${ext}/[name].[contenthash].${ext}`);
-const entryPoints = PAGES.map(page => ({ [page]: `${PAGES_DIR}/${page}/index.js`, }));
-const entryPointsCorrect = Object.assign({}, ...entryPoints);
 
 const common = merge([
   {
-    entry: entryPointsCorrect,
+    mode: 'development',
+
     output: {
-      filename: filename('js'),
       path: PATHS.dist,
       clean: true,
     },
 
     resolve: {
       alias: {
+        '@favicons': path.resolve(__dirname, `${PATHS.src}/favicon`),
         '@variables': path.resolve(__dirname, `${PATHS.src}/styles/variables.scss`),
         '@mixins': path.resolve(__dirname, `${PATHS.src}/styles/mixins.scss`),
-        'src': path.resolve(__dirname, `${PATHS.src}`),
-        'components': path.resolve(__dirname, `${PATHS.src}/components`),
+        src: path.resolve(__dirname, `${PATHS.src}`),
+        components: path.resolve(__dirname, `${PATHS.src}/components`),
       },
     },
 
     plugins: [
-      new MiniCssExtractPlugin({
-        filename: filename('css'),
+      new PugPlugin({
+        // define pages manually
+        // entry: {
+        //   'start-page': './src/pages/start-page/start-page.pug', // output => dist/start-page.html
+        //   'error-page': './src/pages/error-page/error-page.pug', // output => dist/error-page.html
+        //   'landing-page': './src/pages/landing-page/landing-page.pug',
+        //   'registration-page': './src/pages/registration-page/registration-page.pug',
+        //   'room-details-page': './src/pages/room-details-page/room-details-page.pug',
+        //   'search-room-page': './src/pages/search-room-page/search-room-page.pug',
+        //   'sign-in-page': './src/pages/sign-in-page/sign-in-page.pug',
+        //   'ui-kit-colors-type': './src/pages/ui-kit-colors-type/ui-kit-colors-type.pug',
+        //   'ui-kit-headers-footers': './src/pages/ui-kit-headers-footers/ui-kit-headers-footers.pug',
+        //   'ui-kit-form-elements': './src/pages/ui-kit-form-elements/ui-kit-form-elements.pug',
+        //   'ui-kit-cards': './src/pages/ui-kit-cards/ui-kit-cards.pug',
+        // },
+        // OR define the pages directory for automatically processing templates
+        entry: PAGES_DIR,
+        // modify the HTML output filename using the page dirname as the output filename
+        filename: ({ chunk }) => {
+          const [name] = chunk.name.split('/');
+          return `${name}.html`;
+        },
+        // JS output filename
+        js: {
+          filename: filename('js'),
+        },
+        // CSS output filename
+        css: {
+          filename: filename('css'),
+        },
+        loaderOptions: {
+          // resolve or ignore source files in specifically tag attributes
+          sources: [
+            {
+              tag: 'link',
+              // ignore resolving a source fiile in the tag `link` with attribute `rel="manifest"`
+              filter: ({ attributes }) => !(attributes.rel === 'manifest'),
+            },
+          ],
+        },
       }),
-      ...PAGES.map(
-        (page) =>
-          new HtmlWebpackPlugin({
-            filename: `${page}.html`,
-            template: `${PAGES_DIR}/${page}/${page}.pug`,
-            chunks: [page],
-          })
-      ),
       new webpack.ProvidePlugin({
         $: 'jquery',
         jQuery: 'jquery',
@@ -67,11 +90,12 @@ const common = merge([
         'window.$': 'jquery',
       }),
       new CopyPlugin({
-        patterns: [{ from: `${PATHS.src}/favicon`, to: 'assets/favicon/' }],
+        // copy only *.webmanifest file,
+        // source image files are processed and placed into output dir via pug-plugin
+        patterns: [{ from: `${PATHS.src}/favicon/*.webmanifest`, to: 'assets/favicon/[name][ext]' }],
       }),
     ],
   },
-  pug(devMode),
   images(),
   fonts(),
   javaScript(),
@@ -82,14 +106,14 @@ module.exports = function () {
     return merge([
       common,
       postcss(),
-    ])
+    ]);
   }
   if (devMode) {
     return merge([
       common,
       styles(),
       devServer(),
       sourceMap(),
-    ])
+    ]);
   }
-}
+};

webpack/devServer.js

@@ -5,6 +5,12 @@ module.exports = function () {
       port: 8081,
       open: '/start-page.html',
       hot: false,
+      watchFiles: {
+        paths: ['src/**/*.*'],
+        options: {
+          usePolling: true,
+        },
+      },
     },
   };
 };

webpack/postcss.js

@@ -1,12 +1,9 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
 module.exports = () => ({
   module: {
     rules: [
       {
         test: /\.(s[ac]ss|css)$/,
         use: [
-          MiniCssExtractPlugin.loader,
           'css-loader',
           'postcss-loader',
           'sass-loader',

webpack/styles.js

@@ -1,13 +1,10 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
 module.exports = function () {
   return {
     module: {
       rules: [
         {
           test: /\.(s[ac]ss|css)$/,
           use: [
-            MiniCssExtractPlugin.loader,
             {
               loader: 'css-loader',
               options: { sourceMap: true },