关于Webpack的html-loader导致打包错误的一种解决方案

开发环境

Webpack             --> 5.21.1
Webpack-cli         --> 4.7.0
html-loader         --> 2.x.x
html-webpack-plugin --> 5.3.1

问题描述

最近刚刚接触Webpack这个工具，在install html-loader和html-webpack-plugin打包后出现如下错误:

ERROR in   Error: internal/url.js:258
    throw new ERR_INVALID_URL(input);
    ^
  TypeError [ERR_INVALID_URL]: Invalid URL:

  - url.js:258 onParseError
    internal/url.js:258:9

  - url.js:334 new URL
    internal/url.js:334:5

  - url.js:331 new URL
    internal/url.js:331:22

  - loader.js:9 eval
    [index.html?.]/[html-webpack-plugin]/lib/loader.js:9:34

  - index.html:30 Object../node_modules/html-webpack-plugin/lib/loader.js!./src/index.html
    E:/webpackStudy/src/index.html:30:1

  - index.html:73 __webpack_require__
    E:/webpackStudy/src/index.html:73:41
  - index.html:154
    E:/webpackStudy/src/index.html:154:18

  - index.html:155
    E:/webpackStudy/src/index.html:155:12

  - index.js:142 HtmlWebpackPlugin.evaluateCompilationResult
    [webpackStudy]/[html-webpack-plugin]/index.js:142:28

根据报错信息及网上收集到的信息推测是html-loader和html-webpack-plugin出现了冲突。尝试卸载html-loader并安装低版本后问题解决。由于本人水平有限，暂不清楚问题的原理。

解决方案

npm uninstall html-loader
npm install --save-dev html-loader@1.0.0