React-Scripts v4 使用 Raw-Loader 进行热加载的挑战与解决方案
在 React-Scripts v4 版本中，通过 raw-loader 进行文件内容的热加载时，观察到与 v3 版本的一些不同行为。以下是详细说明及解决方案。
问题描述：
// eslint-disable-next-line import/no-webpack-loader-syntax
import html from '!raw-loader!./example.html';
document.body[removed] = html;
在 v3 版本 中，修改 example.html 文件会自动触发热更新，React-Scripts 会刷新页面内容。但是，升级到 v4 版本 后，修改 example.html 无法自动刷新页面。
可能原因
- v4 热更新机制 可能存在与
raw-loader的兼容性问题，导致文件修改后不触发刷新。
解决方法
- 使用
webpack手动配置热加载：通过额外配置 webpack 来指定raw-loader的监听范围。 - 尝试其他加载工具：考虑使用
file-loader等替代方案，或手动调用刷新逻辑。
小结
升级后可能带来的热加载问题可以通过 webpack 配置 来缓解，但在使用 raw-loader 时需关注与 v4 的兼容性。
文件大小：182.67KB
评论区