8

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?
Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Ajay Upadhyay
  • 81
  • 1
  • 4
  • We might need to see your whole Webpack config. I don't have an answer off the top of my head though. – loganfsmyth Aug 24 '17 at 17:11
  • You could refer https://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. – Ajay Upadhyay Sep 02 '17 at 13:13

2 Answers2

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

splintor
  • 9,924
  • 6
  • 74
  • 89
ben
  • 5,671
  • 4
  • 27
  • 55
  • Where do I configure `devtool` when working with angular-cli? – splintor Mar 16 '18 at 07:00
  • 1
    Maybe this helps: https://stackoverflow.com/questions/39187556/angular-cli-where-is-webpack-config-js-file-new-2017-feb-ng-eject – ben Mar 16 '18 at 09:02
  • Actually, I don't know if this will help. According to https://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://...` – splintor Mar 17 '18 at 18:51
  • 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. – ben Mar 17 '18 at 19:49
  • 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://`... :( – splintor Mar 17 '18 at 20:41
  • 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? – ben Mar 18 '18 at 13:06
  • @splintor the PR you reference is outdated. Can you try making a production build with the `--sourcemap` flag? – ben Mar 18 '18 at 13:17
  • 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. – splintor Mar 19 '18 at 19:26
  • 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? – splintor Mar 20 '18 at 06:54
  • 1
    Unfortunately, to the best of my knowledge from looking at their source there is nothing you can do about it. – ben Mar 20 '18 at 09:36
  • Thanks, @ben, Can you explain the difference between prod and dev build, so I can open an issue for them? – splintor Mar 22 '18 at 05:50
  • The difference between dev and prod build comes from this file: https://github.com/angular/devkit/blob/master/packages/angular_devkit/build_webpack/src/angular-cli-files/models/webpack-configs/browser.ts `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. – ben Mar 23 '18 at 23:11
0

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

splintor
  • 9,924
  • 6
  • 74
  • 89