How does webpack work?

Question

From docs you can do this:

require.ensure(["module-a", "module-b"], function(require) { var a = require("module-a"); // ... }); 

require.ensure does not evaluate modules until you become require() . Later they give another example:

 require.ensure([], function(require) { let contacts = require('./contacts') }); 

If the guard array is empty.

So my questions are:

• Should I specify my modules twice? How is the first argument to require.ensure and again inside the callback? Are there any differences between indicating or missing the first argument?

• The callback returns me a new require function, but we already have a global one. Is there a difference between local and global? Can webpack even differentiate them as it should do it statically?

Answer 1

Webpack now supports import() , which is more convenient to use. require.ensure is still supported, so go back to your questions:

• You do not need to specify modules twice. Webpack statically analyzes the source code and adds all the modules mentioned in the array of first arguments and all require d in the modules of the callback function body to a separate block

• In fact, the function passed to callback is not used, and you should always use global require . This is the bizarre behavior that I noted in the official webpack documentation .