Webpack 3.5.5 debugging in chrome developer tools shows two source files. One under webpack:// and other under webpack-internal://

Question

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.

1. The first one under webpack:// It is exactly matching with the source
2. The second one under webpack-internal:// This one is the babel compiled version of the source.

My questions are

1. Is there someway where I get only a first version of the file instead of both?
2. I thought node_modules should have been implicitly defined as a module rather than me specifying it explicitly in resolve, is there someway that I can make the build work without having the node_modules defined in resolve.
3. After using the same source code with webpack 3.5.5(migrated it from webpack 1.14.0) the express server start seems to have slowed node. My guess is that having specified the node_modules in modules under resolve has caused it. Any ideas?

Klink

We might need to see your whole Webpack config. I don't have an answer off the top of my head though. – Southward

You could refer github.com/workco/marvin I am using a similar config to it. When you start the webpack dev server and view source in developer options in chrome. You will find that you see the same file twice in it e.g. RouteStatus.jsx, once under webpack:// and second time under webpack-internal://. The one under webpack:// shows the same file which is the source code whereas the second one shows a babel compiled i guess. – Klink

Answer 1

1. 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.

2. ["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

3. 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?

Glendaglenden

Where do I configure devtool when working with angular-cli? – Symptom

Maybe this helps: #39188056 – Glendaglenden

Actually, I don't know if this will help. According to github.com/angular/angular-cli/pull/3113, It seems that in angular cli the default is devtool: 'source-map'', and I still see webpack-internal://... – Symptom

I tested devtool: 'source-map' using webpack. That's why I'm certain that it works. I don't know angular-cli. If you run ng --help you can see that they provide a --sourcemap flag and that it can only be used to enable or disable source maps. Thus it looks like angular-cli does not allow to configure this. – Glendaglenden

From what I understand, --sourcemap is on by default. You can use --no-sourcemap to cancel it, but then I don't get my source files in the browser at all. With the default (or with --sourcemap), it seems angular cli sets devtool: source-map and I still get webpack-internal://... :( – Symptom

OP was asking about webpack. I gave an answer which to the best of my knowledge is correct for OPs question. I specifically tested it even. So to the person who downvoted: Care to comment why you think this answer is not correct? – Glendaglenden

@Symptom the PR you reference is outdated. Can you try making a production build with the --sourcemap flag? – Glendaglenden

I'll check but I'm more interested in debug build, not production. I see webpack-internal while I develop, and it annoys me. Also, I mistakenly downvoted it, and now SO won't let me upvote unless the answer is edited. – Symptom

OK, I checked, and indeed, in prod build, I don't see webpack-internal (thanks!), but I do see it in debug build, even with --sourcemap, which is very annoying. Any idea what can be done? – Symptom

Unfortunately, to the best of my knowledge from looking at their source there is nothing you can do about it. – Glendaglenden

Thanks, @ben, Can you explain the difference between prod and dev build, so I can open an issue for them? – Symptom

The difference between dev and prod build comes from this file: github.com/angular/devkit/blob/master/packages/angular_devkit/… buildOptions.optimization is responsible for the choice of source map and you can clearly see that there are only two hard coded options of source maps. – Glendaglenden

Answer 2

It seems to be resolved (or at least greatly improved) in Chrome 66.

Symptom