webpack javascript in one line

I am running an Angular 4 project with Webpack 2.4.

For some reason, some of the third party Javascript plugins files are being modified after compilation, and they are shown in the browser's debugger as a very long, one line string:

Browser's debugger

This is very inconvenient because I can't use Chrome / FF debugger, as I am unable to set up any breakpoint in there.

Following some of the already posted questions in this site and many others, I extracted the webpack.config.js file by executing ng eject

The section where the js files are imported look as follows:

    "scripts": [
    "styles": [
"output": {
    "path": path.join(process.cwd(), "dist"),
    "filename": "[name].bundle.js",
    "chunkFilename": "[id].chunk.js"

The file handsontable.full.js does not look like that in my project's folder. It seems to be pretty structured. It seems to suffer some kind of modification when the application is built and served.

More puzzling, many other files in the node_modules folder do not have the same problem.

Now, I tried to tweak the webpack.config.js, as suggested in many forums, specifically SourceMapDevToolPlugin, but with very little luck.

So, several questions arise here:

  1. What is happening here? The transformed file doesn't seem to be a minified file, or a hashed file... What is it?
  2. How can I prevent this from happening, so I can set up breakpoints in that file and use the browser's debugger for tracing, var inspect, etc.



Check the devtool: property in the Webpack config object. If it's set to eval, cheap-eval-source-map (or something like it, don't remember all the eval options), try changing it to source-map or cheap-source-map.

Full list of options here: https://webpack.js.org/configuration/devtool/


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.