In Webpack, you must configure devtool's.

{
  ...,
  devtool: source-map,
  ...,
}

When you do use Babel, you must ensure babel-loader sits in the first position of the loader chain.

• https://github.com/thaiat/webpack-babel-sourcemap

After building the project, deploy your bundle.js file and the source map to your server. The .js file and the source map must be stored in the same folder. Allow in your Nginx/Apache rules to access the source map files from remote but don't add them to your index.html.

Now open the app in your browser and open the DevTools. Chrome and Firefox try to load bundle.js and bundle source map all together. Based on the quality of the generated source map, you should see the code like you have it written in your editor/IDE.

survivejs.com/webpack_react/developing_with_webpa…

You can have a look at webpack.github.io/docs/configuration.html.

Also, have a look at this: stackoverflow.com/questions/30870830/how-do-i-gen… or use a module like this (https://github.com/webpack/source-map-loader).

Hope it helps!