Webpack Dev Server debugging
I'm trying to configure Webstorm (version 2018.3) to debug my App (https://github.com/jailln/itowns) that uses Webpack. Since getting the debugger to stop at a defined break-point doesn't seem to work out of the box, I thus read the following support links in search for some inspiration
- Debugging-react-apps (although the App I'm working on is not a React one, I'm still using webpack)
- Webpack-Dev-Server-debugging
- Debugging-webpack-applications-in-webstorm (that mentions that with a version 2017+ there should be no need for the maps debug-configuration setup).
I did check that
- devtool: 'source-map' is well set in webpack.config.js
- the dist directory indeed exists (although I have to run 'npm run build' manually)
My configuration setup is the following one 
Eventually my "scripts" section seems to be aware of Webpack since I get
The break point I'm trying to set is on line 12 of source file src/Provider/3DTilesProvider.js as illustrated here
Oddly enough the debugger pops up a tab to the source file "lib/src/Provider/3DTilesProvider.js" (notice the leading lib directory). I thus "marked this directory as Excluded" (right button on the directory, then "Mark Directory As" then Excluded).
But when running the debugger with this new set up, another tab for the source file "webpack://[name]/src/Provider/3dTilesProvider.js" is now popped up, but my breakpoint is not respected...
I'm still missing something...
请先登录再写评论。
I've faced similar problems when debugging your app in VSCode and Chrome...
The issue is that no sourcemaps for your original files are there. File that appears in runtime as `webpack://[name]/./src/Provider/3dTilesProvider.js?9e64` (resolved from sourcemaps) doesn't match the source file, it's a transpiled version with let and const changed to var, etc.
Not sure what loaders, etc. has to be blamed
Thank you Elena Pogorelova.
Indeed my understanding (still very modest) is that the loaders cannot get over what gets "scrambled" by the transpiler.
For the record, and possibly other sailors lost at sea, my project experts taught me that it was sufficient (although maybe my case is very specific) to partially inhibit babel (the transpiler of my project ) in order to retrieve functional breakpoints within Webstorm. More precisely, I simply had to comment out the line declaring the usage of 'babel-inline-import-loader' in my webpack.config.js to fix things.