Webpack 4 - Sourcemaps

Question

This article webpack 4: mode and optimization seems to suggest that when mode is set to development the devtool is set to eval.

I was expecting this to trigger sourcemap generation but running the webpack-4-quickstart in either development or production mode results in no sourcemaps being generated.

How can I generate sourcemaps with webpack 4?

Laband

Seems misleading, as the bug is fixed, you still have to set devtool configuration option. – Tenpins

Answer 1

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.

Squirt

It seems the above issue under EDIT: has been Closed and it no longer appears to be an issue with [email protected]. – Maladjustment

Where are the source map generated ? – Maguire

Answer 2

The easiest setup is to add the devtool: 'source-maps' as before.

module.exports = {
  devtool: 'source-map',
  ...
};

But this generates sourcemaps both for development or production mode.

Suicidal