Currently, I am managing an Angular 4 project using Webpack version 2.4.
After compilation, a strange issue arises where some third-party JavaScript plugin files are being altered and displayed as lengthy, single-line strings in the browser's debugger:
https://i.sstatic.net/OOcIv.png
This presents a major inconvenience as setting breakpoints in Chrome or Firefox debugger becomes impossible.
To address this issue, I decided to extract the `webpack.config.js` file by running `ng eject`, following suggestions from various sources including this site.
The part of the configuration file responsible for importing `js` files looks like this:
{
...
"scripts": [
...
"script-loader!./node_modules/handsontable-pro/dist/handsontable.full.js",
...
],
"styles": [
...
]
},
"output": {
"path": path.join(process.cwd(), "dist"),
"filename": "[name].bundle.js",
"chunkFilename": "[id].chunk.js"
}
The actual `handsontable.full.js` file in my project directory appears well-structured. Therefore, it is perplexing that it undergoes some form of alteration during application build and serving processes.
Adding to the confusion, many other files within the `node_modules` folder do not exhibit similar issues.
Attempts to adjust the `webpack.config.js` file, particularly through the use of `SourceMapDevToolPlugin` as recommended in multiple forums, have yielded minimal success.
Consequently, several questions come to mind:
- What exactly is causing these modifications? The transformed file does not appear to be minified or hashed - what could it be?
- How can I prevent this modification to enable the setup of breakpoints, tracing, variable inspection, etc., in the file and utilize the browser’s debugger effectively?