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?

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.

Answer 2

The easiest setup is to add the devtool: 'sourcemaps' as before.

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

But this generates sourcemaps both for development or production mode.