执行npm dev build时遇HtmlWebpackPlugin: require(...).pathToFileURL错误

正在学习Udemy课程《Git a Web Developer Job: Mastering the Modern Workflow》的第19章「构建与部署」，该课程存在部分未更新内容。执行npm run build命令构建HTML文件时，出现以下错误，无法生成HTML文件：

> travel-site@1.0.0 build /Users/support/Desktop/Projects/Travel-site
> webpack

assets by status 29.8 KiB [cached] 4 assets
Entrypoint main = styles.04959366028662e1b1ad.css main.04959366028662e1b1ad.js
runtime modules 7.17 KiB 12 modules
orphan modules 3.94 KiB [orphan] 4 modules
javascript modules 43 KiB
  modules by path ./node_modules/lodash/*.js 16.5 KiB
    ./node_modules/lodash/throttle.js 2.65 KiB [built] [code generated]
    ./node_modules/lodash/debounce.js 5.96 KiB [built] [code generated]
    ./node_modules/lodash/isObject.js 733 bytes [built] [code generated]
    ./node_modules/lodash/now.js 520 bytes [built] [code generated]
    ./node_modules/lodash/toNumber.js 1.48 KiB [built] [code generated]
    + 10 modules
  modules by path ./app/assets/scripts/ 6.96 KiB
    ./app/assets/scripts/App.js + 3 modules 4.92 KiB [built] [code generated]
    ./app/assets/scripts/modules/Modal.js 2.04 KiB [built] [code generated]
  ./node_modules/lazysizes/lazysizes.js 19.5 KiB [built] [code generated]
css ./node_modules/css-loader/dist/cjs.js?url=false!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./app/assets/styles/styles.css 18.5 KiB [built] [code generated]

ERROR in   Error: require(...).pathToFileURL is not a function
  
  - index.html:66 
    /Users/support/Desktop/Projects/Travel-site/app/index.html:66:51
  
  - index.html:85 
    /Users/support/Desktop/Projects/Travel-site/app/index.html:85:13
  
  - index.html:96 
    /Users/support/Desktop/Projects/Travel-site/app/index.html:96:12
  
  - index.js:142 HtmlWebpackPlugin.evaluateCompilationResult
    [Travel-site]/[html-webpack-plugin]/index.js:142:28
  
  - index.js:324 Promise.resolve.then
    [Travel-site]/[html-webpack-plugin]/index.js:324:26
  
  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7
  


webpack 5.75.0 compiled with 1 error in 5345 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! travel-site@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the travel-site@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/support/.npm/_logs/2023-03-13T09_22_15_909Z-debug.log

我的Webpack配置代码如下：

const currentTask = process.env.npm_lifecycle_event;
const path = require("path");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const postCSSPlugins = [
    require("postcss-import"),
    require("postcss-mixins"),
    require("postcss-simple-vars"),
    require("postcss-nested"),
    require("postcss-hexrgba"),
    require("autoprefixer")];

let cssConfig = {
                test: /\.css$/i, 
                use: ["css-loader?url=false",{
                    loader: "postcss-loader", 
                    options: {
                        postcssOptions: {
                            plugins: postCSSPlugins
                        }
                    }
                }]
            }

let config =
{
    entry: "./app/assets/scripts/App.js",
    plugins: [new HtmlWebpackPlugin({
        filename: "index.html",
        template: "./app/index.html"})],
    module: {
        rules: [ cssConfig ]
    }
}

if (currentTask == "dev")
{
    cssConfig.use.unshift("style-loader");

    config.output =
    {
        filename: "bundled.js",
        path: path.resolve(__dirname, "app")
    }

    config.devServer =
    {
        before: function(app, server)
        {
            server._watch("./app/**/*.html");
        },
        contentBase: path.join(__dirname, "app"),
        hot: true,
        port: 3000,
        host: "0.0.0.0"
    }

    config.mode = "development";
}

if (currentTask == "build")
{
    cssConfig.use.unshift(MiniCssExtractPlugin.loader);

    config.output =
    {
        filename: "[name].[chunkhash].js",
        chunkFilename: "[name].[chunkhash].js",
        path: path.resolve(__dirname, "dist")
    }

    config.mode = "production";
    config.optimization =
    {
        splitChunks: {chunks: "all"},
        minimize: true,
        minimizer: [`...`, new CssMinimizerPlugin()]
    }

    config.plugins.push(
      new CleanWebpackPlugin(),
      new MiniCssExtractPlugin({filename: 'styles.[chunkhash].css'}) 
    )
}

module.exports = config;

不确定是代码存在笔误、遗漏内容，还是课程未及时更新导致问题，目前怀疑问题出在HtmlWebpackPlugin配置中的template: "./app/index.html"行。

内容的提问来源于stack exchange，提问作者AlexSavAlexandrov