Webpack 4 - Sourcemaps

webpack webpack-4
kimsagro picture kimsagro · Feb 26, 2018 · Viewed 18.4k times · Source

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

Tomasz Mularczyk picture Tomasz Mularczyk · Feb 26, 2018

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.

Related questions

Webpack 4 - create vendor chunk

In a webpack 3 configuration I would use the code below to create separate vendor.js chunk: entry: { client: ['./client.js'], vendor: ['babel-polyfill', 'react', 'react-dom', 'redux'], }, output: { filename: '[name].[chunkhash].bundle.js', path: '../dist', chunkFilename: '[name].[chunkhash].…

Read More
Webpack 4 - How to configure minimize?

Webpack 4 comes with the following statement: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead. Fair enough, but I cannot find any information about configuring the UglifyJsPlugin instance running under the hood, for example to change the …

Read More
Webpack 4 : ERROR in Entry module not found: Error: Can't resolve './src'

I was trying to run webpack-4 first time webpack ./src/js/app.js ./dist/app.bundle.js it shows warning / error : WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set …

Read More