Webpack source maps indicating a minimized package

Question

I am creating a Webpack build process for an existing project and run into some problems with the source maps.

I am using devtool: 'eval-source-map', If an error occurs in the browser, each file / line number in the stack trace indicates a file compressed into one line in the Webpack package.

For example, the first line of a stack trace might look like this:

Unprepared error: foo

at child.initialize (eval at ( http://127.0.0.1:8000/js/dist/index.js:1270:1 ) ,: 45: 10)

Clicking on the file name / line number brings me to the set to the line where the file in which the error occurred gets "in the set" using Webpack. Looks like that:

 /* 223 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // Below is the line it points to, and it goes on to have the entire file on the same line eval("/* WEBPACK VAR INJECTION */(function(Backbone, $, _) { ... 

However, the entire contents of the file are in this single line, so it is completely useless.

This happens even if I trim the Webpack configuration before this:

 var path = require('path'), webpack = require('webpack'); module.exports = { entry: { 'indexhead': './static/js/main.js', 'accounthead': './static/js/accountManager.js' }, output: { path: path.join(__dirname, 'static/js/dist'), filename: '[name].js' }, devtool: 'eval-source-map', }; 

And it happens for the other types of types of development source maps indicated here . If instead I use the production setting devtool: source-map , I will still point to a giant package file with every single script there, but at least the lines are “deployed” and I see where the error occurred.

How can I fix this or at least fix the malfunction?

Answer 1

I tried to reproduce the problem and I found this. Perhaps this is not what you are looking for.

After linking the code to webpack, the code throws an error in the Chrome console.

When I click on the link main.js: 2166, the browser translates me into the associated code.

When I update the Chrome browser, I see a link to the source file "layout.js".

Clicking on this link will lead me to a fragmented code.

If I create a web page using Webpack with devtool: 'eval-source-map', I get the same result as with Webpack-dev-server. You can check if the build js files have a built-in sourceMap.

Answer 2

The only way to replicate your problem is to disable the source maps in Chrome settings:

I was getting something like this:

When I turned on the source maps, I got something like the image below. By clicking on the file name on the right side, they took me to the right place.