Webpack3升级至Webpack4时html-webpack-plugin报错求助

我之前在把Webpack 3升级到Webpack 4的过程中，也碰到过这个一模一样的报错，折腾了好一会儿才梳理出几个有效的解决方向，你可以挨个试试：

1. 升级html-webpack-plugin到适配Webpack 4的版本 #

Webpack 4对插件的兼容性要求有变化，旧版本的html-webpack-plugin（比如v3及以下）和Webpack 4不兼容，这是最常见的原因。你需要安装专门适配Webpack 4的版本：

# npm 安装
npm install html-webpack-plugin@^4.0.0-beta.5 --save-dev

# yarn 安装
yarn add html-webpack-plugin@^4.0.0-beta.5 --dev

这个版本是官方针对Webpack 4推出的测试版，后续稳定版也可以直接安装最新的兼容版本（只要确认版本说明里支持Webpack 4即可）。

2. 检查html-webpack-plugin的配置和模板文件 #

从你的编译日志来看，插件正在处理pre-index.html和login.html这两个模板，你需要确认：

• 模板文件的路径是否正确，有没有拼写错误，文件是否确实存在于指定位置；
• 插件配置里有没有过时的参数，比如Webpack 4中有些配置项的默认值或语法有变动，比如minify的配置格式，或者chunks的引用方式，建议对照新版文档清理掉无效配置。

3. 清理依赖缓存和重新安装 #

有时候依赖冲突或者缓存文件会导致这种奇怪的报错，你可以尝试：

• 删除项目根目录的node_modules文件夹和package-lock.json（或yarn.lock）文件；
• 重新执行npm install或yarn install，确保依赖完全重新安装；
• 删除Webpack的输出目录（比如dist），清理编译缓存后重新打包。

你提供的报错及编译日志： #

ERROR in Must have a source file to refactor。相关编译日志如下：
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint html-webpack-plugin for "index.html" = ./index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./pre-index.html] 1.91 KiB {html-webpack-plugin for "index.html"} [built]
Child html-webpack-plugin for "login.html":
1 asset
Entrypoint html-webpack-plugi...

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