Webpack打包后本地打开HTML加载SCSS背景图报ERR_FILE_NOT_FOUND

• 报错根源是Webpack的publicPath配置和当前使用场景不匹配：你设置的output.publicPath: "/"是绝对路径，仅适配Webpack DevServer的运行环境——DevServer会将根路径映射到内存中的打包资源目录，开发调试时可以正常加载图片。但你现在是直接通过浏览器打开本地打包的HTML文件（走file协议），此时/会被浏览器解析为磁盘根目录，叠加WSL2的网络挂载路径特征，最终拼接出file://wsl$/c76193e7a53ed91f170bfaedb61a2832.png的无效地址，触发文件找不到的错误。
• index.js里的require.context("./images", true)属于无效逻辑：这段代码仅会扫描图片目录，没有对扫描到的资源做实际引用或导出，不会把图片关联到页面的加载链路中，对解决图片加载问题没有实际作用。

1. 调整Webpack输出路径配置
   把webpack.config.js中output节点的publicPath从"/"改成"./"。相对路径配置会让所有打包生成的资源（JS、CSS、图片）都以当前HTML文件的所在目录为基准拼接加载路径，同时兼容DevServer调试、本地直接打开HTML两种场景。
2. 清理冗余代码
   删除index.js中无实际功能的require.context("./images", true)语句，不影响现有打包逻辑。
3. 校验加载链路
   当前的SCSS处理loader顺序（style-loader → css-loader → resolve-url-loader → sass-loader）是正确的，不需要调整SCSS里写的url(./images/stagetimebanner.png)路径写法，重新执行打包后即可在本地打开的HTML中正常加载背景图。

注意：修改配置后重新打包，确认dist目录下的图片资源和入口HTML处于同一层级目录，即可避免路径拼接错误。

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