3

I have set up HMR successfully, everything working, including proxying the backend site. The only issue remaining is, that I can't see the actual original code (ES2015) in the browser unless I do a full reload.

Did I miss something or is this not possible? I use 'cheap-module-eval-source-map', tried 'cheap-module-inline-source-map'. Is it even possible to provide sourcemaps in replaced modules, because they have to be evaluated?

macmillancodes
  • 63
  • 7

3 Answers3

3

There is an issue with HMR and updating the source maps in the DevTools. Typically, the source maps are cached by the browsers and since HMR does not trigger a full page reload, you are stuck with the outdated source map. As a workaround, you can reload the Chrome DevTools pressing alt+r. Apparently this works with cheap-module-source-map.

See https://github.com/webpack/webpack/issues/2478 for more information.

xfh
  • 31
  • 4
2

Use webpack-dev-server -d --hot --inline

-d is shorthand for --debug --devtool source-map --output-pathinfo

--hot is for hot replacement of modules

And then dev-server will start generating sourcemaps and inject code on every change

Yigit Erol
  • 170
  • 1
  • 6
1

-d is a shortcut for the command below in webpack v.4.8.3

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

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

The thing that fixed it for me was setting the following in webpack.config.js:

devtool: "cheap-module-eval-source-map",
Ogglas
  • 62,132
  • 37
  • 328
  • 418