14

In my web app I was using RequireJS to asynchronously load my javascript files on demand. This worked well for dev - when debugging my app I could see which script is dependent on which and order in which they were loaded. This simplified debugging.

Later I switched to Webpack as it is much easier in configuration and easier to maintain. So Webpack now generates for me nice bundles containing my javascript code. This works perfectly well but what I'd like to have is an imitation of my previous RequireJS configuration for dev time.

When I am developing my app I want Webpack to generate some simple entry point (just like in RequireJS) which would load my javascript files one by one through their "require" references. At the same time I still want that Webpack performed normal bundling when I deploy my app to a server.

Is this possible to achieve?

Louis
  • 146,715
  • 28
  • 274
  • 320
Kirill Metrik
  • 384
  • 1
  • 2
  • 12
  • Pretty sure this is for webpack 3 and these options have been changed in webpack 4. Is it for webpack 3? – jcollum Jan 03 '19 at 18:51

2 Answers2

10

Enable Devtools in webpack.config.js to control and generate source maps (Source Maps enhance debugging process).

webpack.config.js

  devtool: "#inline-source-map",

Chrome Debugger View

enter image description here

Shashank K
  • 388
  • 4
  • 13
  • Is there also an option to get separate files for the translated modules? Otherwise I am not able to mock module dependencies in my unit tests. Related question: https://stackoverflow.com/questions/57379078/how-to-mock-amd-module-dependencies-for-es6-unit-tests-with-karma-requirejs – Stefan Aug 07 '19 at 12:24
1

Nope, that's not possible. But have you tried the devtool-option? It maps back your original files in your devtools so you should see no difference whether the modules were in different files or just all in one.

Johannes Ewald
  • 17,665
  • 5
  • 44
  • 39
  • 1
    Thanks for the reply! No, I didn't try this option and from documentation I still don't really get what exactly it does. Does it allow to inform webpack to include more information for debugging? If yes, what would be typical use? – Kirill Metrik Aug 04 '16 at 19:26