Explain what "lazy" means in this context about bundle-loader

[Duan112358]

when specify bundle?lazy&name=the_module_name!some_module_path, will cause the module bundled individual , and load sync in page init, not as the lazy specified

[sokra]

The API is:

var bundle = require("bundle!./file.js"); // <= browser sends request here
bundle(function(fileExports) { // callback is called when the module is ready
  // fileExports can be used
});

var bundle = require("bundle?lazy!./file.js");
bundle(function(fileExports) { // <= browser sends request here
  // fileExports can be used
});

Basically the bundle-loader is like:

require(["./file.js"], function(fileExports) {
  // fileExports can be used  
});

But it affects only one module:

 // two separate requests
var b1 = require("bundle!./f1");
var b2 = require("bundle!./f2");

// one request with both modules
require(["./f1", "./f2"], function(f1, f2) {/*...*/});

Most important use case with dynamic requires:

// Good: load only the page requested.
// Each page is in a separate chunk
function loadPage(pageName, callback) {
  try {
    var pageBundle = require("bundle!./pages/" + pageName)
  } catch(e) {
    return callback(e);
  }
  pageBundle(function(page) { callback(null, page); })
}

// Bad: All pages in one chunk, loads all pages at once
// Unwanted behavior
function loadPage(pageName, callback) {
  try {
    require(["./pages/" + pageName], function(page) {
      callback(null, page);
    });
  } catch(e) {
    calback(e);
  }
}

Maybe you can add some of these examples to the README.

[sokra]

see webpack/webpack#118 (comment)

[fresheneesz]

But.. the readme should say what it means. Otherwise its only me, you, and jhnns that knows ; )

[sokra]

Add it and send a PR... 😄

[fresheneesz]

Done. But I just realized, I wouldn't actually know how to access the module's exports when using 'lazy'. Do you have to require it again normally somewhere later?

[sokra]

The api is the same for both modes.

[fresheneesz]

So...

var load = require("bundle?lazy!.file.js", function() {
   // do stuff on load?
})
load() 

?

[tquetano-r7]

Is there a way to combine this with require.context? Whenever I attempt loading with context, the module is unable to be found.

[mrdulin]

I try to load module lazy. But webpack give me this:

WARNING in ./src/main.js
Critical dependencies:
47:28-78 the request of a dependency is an expression
 @ ./src/main.js 47:28-78

WARNING in ./src/index.html
Module parse failed: /Users/dulin/workspace/webpack-summer/bundle-loader/simple/src/index.html Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp.raise (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:920:13)
    at Parser.pp.unexpected (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:1483:8)
    at Parser.pp.parseExprAtom (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:330:12)
    at Parser.pp.parseExprSubscripts (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:225:19)
    at Parser.pp.parseMaybeUnary (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:204:17)
    at Parser.pp.parseExprOps (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:151:19)
    at Parser.pp.parseMaybeConditional (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:133:19)
    at Parser.pp.parseMaybeAssign (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:110:19)
    at Parser.pp.parseExpression (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:86:19)
    at Parser.pp.parseStatement (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:1753:23)
    at Parser.pp.parseTopLevel (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:1648:21)
    at Parser.parse (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:1616:17)
    at Object.parse (/usr/local/lib/node_modules/webpack/node_modules/acorn/dist/acorn.js:882:44)
    at Parser.parse (/usr/local/lib/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/usr/local/lib/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/usr/local/lib/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/usr/local/lib/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /usr/local/lib/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.provide (/usr/local/lib/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:52:20)
    at CachedInputFileSystem.readFile (/usr/local/lib/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:140:24)
    at DependenciesBlock.onLoadPitchDone (/usr/local/lib/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:255:7)
    at DependenciesBlock.loadPitch (/usr/local/lib/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:182:27)
    at DependenciesBlock.doBuild (/usr/local/lib/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:241:4)
    at DependenciesBlock.build (/usr/local/lib/node_modules/webpack/lib/NormalModule.js:84:14)
    at Compilation.buildModule (/usr/local/lib/node_modules/webpack/lib/Compilation.js:126:9)
    at /usr/local/lib/node_modules/webpack/lib/Compilation.js:309:10
    at /usr/local/lib/node_modules/webpack/lib/NormalModuleFactory.js:58:13
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/usr/local/lib/node_modules/webpack/node_modules/tapable/lib/Tapable.js:75:69)
    at onDoneResolving (/usr/local/lib/node_modules/webpack/lib/NormalModuleFactory.js:38:11)
    at onDoneResolving (/usr/local/lib/node_modules/webpack/lib/NormalModuleFactory.js:121:6)
 @ ./src ^\.\/.*$

WARNING in ./src ^\.\/.*$
Module not found: Error: a dependency to an entry point is not allowed
 @ ./src ^\.\/.*$

WARNING in ./src ^\.\/.*$
Module not found: Error: a dependency to an entry point is not allowed
 @ ./src ^\.\/.*$

here is my code:

document.addEventListener('DOMContentLoaded', init);

const dynamicModules = ['a', 'b', 'c'];

function init() {
	document.getElementById('lazyloadModule').addEventListener('click', handleLazyloadModule, false);
}

function handleLazyloadModule(e) {
	var moduleName = 'a';
	var layzLoadModuleMap = loadModuleLazy(dynamicModules);
	layzLoadModuleMap[moduleName](function(module) {
		console.log('lazyloadModule is ' + module);
	})
}

function loadModuleLazy(names) {
	var layzLoadModuleMap = {};
	names.forEach(function(name) {
		layzLoadModuleMap[name] = require(`bundle-loader?lazy!./modules/${name}.js`);
	});
	return layzLoadModuleMap;
}

Anybody can help me? Thanks.