Migrated existing webpack project to use webpack 3.5.5 and its new config. Using express server instead of webpack-dev-server. I had to setup the resolve in webpack as below.
const resolve = {
extensions : ['.js'],
modules : [
'node_modules',
'src',
'testApplication'
]
};
When i debug this webpack application using chrome developer tools I can see the 2 versions of source files.
My questions are
Click the "inspect" link under each script to open a dedicated debugger or the Open dedicated DevTools for Node link for a session that will connect automatically. You can also check out the NiM extension, a handy Chrome plugin that will automatically open a DevTools tab every time you --inspect a script.
Open developer tools in chrome by pressing F12 /Ctrl + Shift + I/ right-click anywhere inside the web page and select Inspect/Inspect Element which will be mostly the last option. Go to Sources tab in developer tools and open any minified JS which you want to debug as shown in the image.
You can configure the source maps using Webpack's devtool
property. What you want is devtool: 'source-map'
(source). This will only show you the original source code under webpack://
. Note that there are other options that might be more appropriate for your use case.
["node_modules"]
is in the default value for resolve.modules
. However, if you specify resolve.modules
you need to include "node_modules"
in the array. (source).
It seems strange that you specify "src"
and "testApplication"
in resolve.modules
. If you have local source files you should require them using relative paths e.g. require("./local_module")
. This should work without having src
in resolve.modules
Specifying node_modules
in resolve.modules
is not responsible for any slow down (see 2.). There are many possible reasons the slow down. E.g. maybe you are erroneously applying babel to the whole node_modules
folder?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With