How do I get source mapping to work with Chrome Dev Tools and webpack?

Question

I'm using webpack-dev-server -d --inline to serve my dist/app.js file generated through webpack. I've activated source mapping and it is generating an app.js.map file in my dist/ folder, along with //# sourceMappingURL=app.js.map at the end of the file, yet Chrome devtools doesn't seem to be using the source mapping.

I thought that maybe the problem was that Chrome couldn't see the raw source files (since only the dist/ folder is being served by webpack-dev-server), so I've tried mapping the served file to the local file in dev tools.

Unfortunately I then get a "workspace mapping mismatch", I'm not sure why the file would be different, nor am I sure that this would fix the source mapping problem even if the files did match.

I would appreciate any help.

Answer 1

Configuring publicPath did the trick for me. In your case you could try to point to the same path of your bundled output.

webpack.config.js

var path = require("path");
module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
    filename: 'app.js'
  }
};