Webpack热模块替换（HMR）源映射未更新/新代码在开发工具中不可见

Question

我已成功设置HMR，一切正常，包括代理后端站点。剩下的唯一问题是，除非我完全重新加载，否则我无法在浏览器中看到实际的原始代码（ES2015）。

我错过了什么或者这不可能吗？我使用'cheap-module-eval-source-map'，尝试'cheap-module-inline-source-map'。甚至可以在替换模块中提供源映射，因为它们必须进行评估吗？

Answer 1

HMR存在问题并在DevTools中更新源地图。通常，源映射由浏览器缓存，并且由于HMR不会触发整页重新加载，因此您会遇到过时的源映射。 作为解决方法，您可以按alt+r重新加载Chrome DevTools。显然，这适用于cheap-module-source-map。

有关详细信息，请参阅https://github.com/webpack/webpack/issues/2478。

Answer 2

使用-d

--debug --devtool source-map --output-pathinfo是--hot

的简写

{{1}}用于热替换模块

然后dev-server将开始生成源映射并在每次更改时注入代码

Answer 3

-d是以下webpack v.4.8.3

命令的快捷方式

--debug --devtool cheap-module-eval-source-map --output-pathinfo

https://webpack.js.org/api/cli/#shortcuts

为我修复它的是在webpack.config.js中设置以下内容：

devtool: "cheap-module-eval-source-map",