Using Webpack: making the chrome errors point to the actual file rather than bundle.js

This might be of help to you if you’re starting out using Webpack.

When using Webpack for front-end dev, any errors in the chrome console show as “error in bundle.js line 854” or whatever, so you have to first look in bundle.js for where the error is located, and then go to the app.js or module files to locate and start troubleshooting and make the relevant change. I thought this was just a tradeoff for using Webpack, but thanks to @Velenir, he showed me that you can enable the Webpack devtool. This will force Chrome to point to the actual file that has the error; much more useful!

add "devtool: ‘eval-source-map’, " to your module.exports object in webpack.config.js file.

https://webpack.github.io/docs/configuration.html#devtool

My setup:
I have ‘webpack --watch’ running in a bash window, I make a change to my app.js file or another module file, then flip to Chrome (autorefresh) to see the effect of the change. Any errors in the Chrome console now point to the original file.

If there’s a better setup for your development environment, please let me know; tutorials for this kind of thing are few and far between.

1 Like

Update: I’ve progressed to using webpack-dev-server. It does everything in memory, so doesn’t need to write the output files to disk on every change, and is therefore also quicker. Probably other benefits I’m yet to comprehend!