Replace simple-nunjucks-loader with njk-loader

## Reason
Simplification of working with assets (images, fonts, etc.):
- simple-nunjucks-loader doesn't work with data attributes (srcset, data-src, etc)
- njk-loader requires no additional function to load images

## Dependencies removed:
- simple-nunjucks-loader

## Installed dependencies:
- html-loader

README.md

@@ -159,7 +159,8 @@ Indicates whether TypeScript support should be enabled. <br/>
 
 ### Loaders:
 - Nunjucks
-  - [simple-nunjucks-loader](https://github.com/ogonkov/nunjucks-loader)
+  - [html-loader](https://github.com/webpack-contrib/html-loader)
+  - [njk-loader(internal)](./config/modules/njk-loader/index.js)
     - [nunjucks](https://github.com/mozilla/nunjucks)
 
 - JavaScript

config/loaders/README.md

@@ -1,7 +1,8 @@
 # 📘 Loaders
 
 ## Nunjucks
-- [simple-nunjucks-loader](https://github.com/ogonkov/nunjucks-loader)
+- [html-loader](https://github.com/webpack-contrib/html-loader)
+- [njk-loader(internal)](../modules/njk-loader/index.js)
   - [nunjucks](https://github.com/mozilla/nunjucks)
 
 ## JavaScript

config/loaders/nunjucks.loader.js

@@ -1,5 +1,6 @@
+const path = require('path')
+const { SOURCE_DIR } = require('../constants')
 const createThreadLoader = require('../utils/createThreadLoader')
-const getNunjucksGlobals = require('../utils/getNunjucksGlobals')
 
 
 /**
@@ -11,21 +12,25 @@ const threadLoader = createThreadLoader({
 })
 
 
+/**
+ * Exports HTML as string.
+ * https://github.com/webpack-contrib/html-loader
+ */
+const htmlLoader = {
+  loader: 'html-loader',
+  options: {  }
+}
+
+
 /**
  * Transpiles nunjucks files into HTML files.
- * https://github.com/ogonkov/nunjucks-loader
+ * ../modules/njk-loader
  */
 const nunjucksLoader = {
-  loader: 'simple-nunjucks-loader',
+  loader: path.resolve('./config/modules/njk-loader'),
   options: {
-    searchPaths: ['src/njk'],
-    assetsPaths: ['src/images'],
-    globals: {
-      ...getNunjucksGlobals('functions')
-    },
-    filters: {
-      ...getNunjucksGlobals('filters')
-    }
+    context: require(path.resolve(SOURCE_DIR, 'data', 'nunjucks.data.js')),
+    templates: 'njk'
   }
 }
 
@@ -34,6 +39,7 @@ module.exports = {
   test: /\.(njk|nunjucks|html)$/i,
   use: [
     threadLoader,
+    htmlLoader,
     nunjucksLoader
   ]
 }

config/modules/njk-loader/index.js

@@ -0,0 +1,38 @@
+const path = require('path')
+const { Environment, FileSystemLoader } = require('nunjucks')
+const { SOURCE_DIR } = require('../../constants')
+
+
+/**
+ * Transpiles nunjucks files into HTML files.
+ * https://webpack.js.org/contribute/writing-a-loader
+ *
+ * @requires nunjucks
+ * @requires html-loader
+ *
+ * @todo Handle errors
+ * @todo Hide common code (njk config)
+ *
+ * @param {String} source - the contents of the raw resource
+ * @returns {String} a valid HTML string
+ */
+module.exports = function(source) {
+  const callback = this.async()
+  const { context, templates } = this.getOptions()
+
+  const env = new Environment(
+    new FileSystemLoader(path.resolve(SOURCE_DIR, templates)),
+    {
+      autoescape: true
+    }
+  )
+  env.on('load', (name, source, loader) => {
+    this.addDependency(source.path)
+  })
+
+  env.renderString(source, context, (error, HTMLString) => {
+    callback(error ? error : null, HTMLString)
+  })
+
+  return
+}

config/plugins/html.plugin.js

@@ -17,7 +17,6 @@ module.exports = fs.readdirSync(SOURCE_DIR).map(templateName => {
   return new HTMLWebpackPlugin({
     template: `${ templateName }`,
     filename: `${ filename }.html`,
-    chunks: ['common', filename],
-    templateParameters: require(path.resolve(SOURCE_DIR, 'data', 'nunjucks.data.js'))
+    chunks: ['common', filename]
   })
 }).filter(Boolean)

package.json

@@ -25,14 +25,14 @@
     "eslint": "^7.24.0",
     "eslint-webpack-plugin": "^2.5.3",
     "fork-ts-checker-webpack-plugin": "^6.2.1",
+    "html-loader": "^2.1.2",
     "html-webpack-plugin": "^5.3.1",
     "mini-css-extract-plugin": "^1.4.1",
     "nunjucks": "^3.2.3",
     "postcss": "^8.2.9",
     "postcss-loader": "^5.2.0",
     "sass": "^1.32.8",
     "sass-loader": "^11.0.1",
-    "simple-nunjucks-loader": "^3.1.0",
     "style-loader": "^2.0.0",
     "stylelint": "^13.12.0",
     "stylelint-webpack-plugin": "^2.1.1",

src/njk/_layout.njk

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ '[Dev] ' if isDev }}{{ title }}</title>
-  <link rel="icon" type="image/png" href="{% static 'favicon.png' %}"/>
+  <link rel="icon" type="image/png" href="images/favicon.png"/>
   <meta name="description" content="{{ description }}">
   <meta name="author" content="{{ author }}">
   <meta name="theme-color" content="{{ theme }}">

yarn.lock

@@ -3005,7 +3005,7 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@^7.0.3, glob@^7.1.3, glob@^7.1.6:
+glob@^7.0.3, glob@^7.1.3:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
   integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
@@ -3199,7 +3199,15 @@ html-entities@^1.3.1:
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.4.0.tgz#cfbd1b01d2afaf9adca1b10ae7dffab98c71d2dc"
   integrity sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==
 
-html-minifier-terser@^5.0.1:
+html-loader@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-2.1.2.tgz#17eb111441e863a9308071ed876b4ba861f143df"
+  integrity sha512-XB4O1+6mpLp4qy/3qg5+1QPZ/uXvWtO64hNAX87sKHwcHkp1LJGU7V3sJ9iVmRACElAZXQ4YOO/Lbkx5kYfl9A==
+  dependencies:
+    html-minifier-terser "^5.1.1"
+    parse5 "^6.0.1"
+
+html-minifier-terser@^5.0.1, html-minifier-terser@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#922e96f1f3bb60832c2634b79884096389b1f054"
   integrity sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==
@@ -4616,6 +4624,11 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse5@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
+  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
+
 parseurl@~1.3.2, parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -5534,15 +5547,6 @@ signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
 
-simple-nunjucks-loader@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/simple-nunjucks-loader/-/simple-nunjucks-loader-3.1.0.tgz#9cf5495e7c81d9ce2cd3502c6aaa9a48a52af735"
-  integrity sha512-9sVcCX+PmsghYuQK5rnHM3lUOW+rX7WuIkZZ7Tjeno8r4wP2U/LZ+W8K0ax6y8bm3FUl9lNNvAfywQB985rlcA==
-  dependencies:
-    loader-utils "^2.0.0"
-  optionalDependencies:
-    glob "^7.1.6"
-
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"