chore: Enhance Webpack configuration and remove unused dependencies

- Added `inline-script-csp-html-webpack-plugin` for improved CSP management with inline script support.
- Removed unused dependencies and cleaned up `package-lock.json`.
- Updated SCSS for better modularity and code readability.
- Merged `linkedData.ejs` into `index.ejs` to simplify JSON-LD implementation.
- Enhanced `HtmlWebpackPlugin` minification settings and added support for processing JSON-LD scripts.
- Improved CSP configuration with stricter hashing and enabled `script-src` and `style-src` hashing.
- Optimized Terser configuration for better compression with additional passes.

Author: warnyul

inline-script-csp-html-webpack-plugin.js

@@ -0,0 +1,68 @@
+const cheerio = require('cheerio');
+const CspHtmlWebpackPlugin = require('csp-html-webpack-plugin');
+const flatten = require('lodash/flatten');
+const get = require('lodash/get');
+
+/**
+ * InlineScriptCspHtmlWebpackPlugin
+ * An extension of CspHtmlWebpackPlugin to handle Content Security Policies (CSPs).
+ * This class only modifies a single property (`_useHtmlParser2`) in the Cheerio configuration 
+ * to customize how HTML is parsed.
+ */
+class InlineScriptCspHtmlWebpackPlugin extends CspHtmlWebpackPlugin {
+  /**
+   * Constructor
+   * Calls the base class constructor to set up the plugin with user-defined or default policies and options.
+   * @param {object} policy - CSP policy object, typically defining 'script-src' and 'style-src'.
+   * @param {object} additionalOpts - Additional options for nonce/hash generation and processing.
+   */
+  constructor(policy = {}, additionalOpts = {}) {
+    super(policy, additionalOpts);
+  }
+
+  /**
+   * Processes HtmlWebpackPlugin's HTML output to inject the Content Security Policy.
+   * The key difference from the base class is setting `_useHtmlParser2: false` in the Cheerio configuration.
+   * @param {object} compilation - Webpack's compilation object.
+   * @param {object} htmlPluginData - Data object from HtmlWebpackPlugin containing the generated HTML.
+   * @param {function} compileCb - Callback to continue Webpack's compilation process.
+   */
+  processCsp(compilation, htmlPluginData, compileCb) {
+    const $ = cheerio.load(htmlPluginData.html, {
+      decodeEntities: false,
+      _useHtmlParser2: false, // *** Changed from 'true' in the base class to 'false' ***
+      xmlMode: get(htmlPluginData, 'plugin.options.xhtml', false),
+    });
+
+    // if not enabled, remove the empty tag
+    if (!this.isEnabled(htmlPluginData)) {
+      return compileCb(null, htmlPluginData);
+    }
+
+    // get all nonces for script and style tags
+    const scriptNonce = this.setNonce($, 'script-src', 'script[src]');
+    const styleNonce = this.setNonce($, 'style-src', 'link[rel="stylesheet"]');
+
+    // get all shas for script and style tags
+    const scriptShas = this.getShas($, 'script-src', 'script:not([src])');
+    const styleShas = this.getShas($, 'style-src', 'style:not([href])');
+
+    const builtPolicy = this.buildPolicy({
+      ...this.policy,
+      'script-src': flatten([this.policy['script-src']]).concat(
+        scriptShas,
+        scriptNonce
+      ),
+      'style-src': flatten([this.policy['style-src']]).concat(
+        styleShas,
+        styleNonce
+      ),
+    });
+
+    this.processFn(builtPolicy, htmlPluginData, $, compilation);
+
+    return compileCb(null, htmlPluginData);
+  }
+}
+
+module.exports = InlineScriptCspHtmlWebpackPlugin;

package-lock.json

@@ -4,7 +4,7 @@
   "description": "Personal website and portfolio",
   "main": "src/index.html",
   "scripts": {
-    "build": "webpack --mode production --optimization-minimize --config webpack.config.js",
+    "build": "webpack --mode production --config webpack.config.js",
     "start": "npx webpack serve --mode production --optimization-minimize --config webpack.config.js --stats verbose"
   },
   "repository": {
@@ -28,7 +28,6 @@
     "html-inline-css-webpack-plugin": "^1.11.1",
     "html-inline-script-webpack-plugin": "^3.2.1",
     "html-loader": "^5.1.0",
-    "html-minifier": "^4.0.0",
     "html-minimizer-webpack-plugin": "^5.0.0",
     "html-webpack-plugin": "^5.6.3",
     "image-minimizer-webpack-plugin": "^4.1.1",