How to Generate Sourcemaps When Using Babel and Webpack

How do I generate sourcemaps when using babel and webpack?

In order to use source map, you should change devtool option value from true to the value which available in this list, for instance source-map

devtool: 'source-map'

devtool: 'source-map' - A SourceMap is emitted.

Generating .js source maps using babel and webpack with Aurelia

Replace this line:

...
"scripts": {
    "dev": "webpack-dev-server -d --config webpack.config.js --hot --inline --progress --devtool eval"
...

For this:

...
"scripts": {
    "dev": "webpack-dev-server -d --config webpack.config.js --hot --inline --progress --devtool source-map"
...

Put a debugger; (which works as a break-point) in the view-model and keep the browser's devtools opened. For instance:

export class MyViewModel {
   constructor() {
     debugger;
     //...
   }
}

Now you should see the debugger working at ES2016 level.

webpack source map generation

Open Chrome DevTools, then select Settings and check Enable JavaScript sourcemaps.

Webpack 4 - Sourcemaps

I think what you are expecting is extracted file including source maps like 'bundle.js.map', but eval type doesn't generate separate file:

eval - Each module is executed with eval() and //@ sourceURL. This is
pretty fast. The main disadvantage is that it doesn't display line
numbers correctly since it gets mapped to transpiled code instead of
the original code (No Source Maps from Loaders).

But you can always do it by manually configuring devtool property like:

devtool: 'source-map'

which will extract source-maps to a file. Here are described types of sourcemaps along with their costs and benefits.

EDIT:

Actually there is a issue on github with a PR related to this. Right now UglifyJS plugin has set sourceMap: false even in production mode and it doesn't let extracting source-maps to separate file even with devtool set.

webpack + babel loader source map references empty file

Babel introduced a different sourcemap format here and Webpack didn't handle it correctly.

The fix was merged in this PR, and released in Webpack 1.14.0.

---

Related Topics