Based on https://github.com/webpack/bundle-loader with improvements of error handling
npm install async-module-loader
webpack documentation: Using loaders
Also you will need to use AsyncModulePlugin
.
async-module-loader
returns function which accepts 2 callbacks: for success and for fail
Exports of the requested module are passed into success callback as a first argument
require('async-module-loader!./file.js')(function onLoad(mod) {
mod.doSomething();
}, function onError() {
// error happened
});
Also you can use Promises with promise
option specified, like this:
require('async-module-loader?promise!./file.js').then(function onLoad(mod) {
mod.doSomething();
}, function onError() {
// error happened
});
require('async-module-loader?name=my-chunk!./file.js')(function onLoad(mod) {
mod.doSomething();
}, function onError() {
// error happened
});
If you do not want your module to be executed immediately (maybe because some animation is in play), then you can tell to async-module-loader
to load a chunk, but not execute it. In such, a function will be passed to the success callback instead of a module.exports
object of requested chunk. Call that function then you will need you chunk executed:
require('async-module-loader?noexec!./file.js')(function onLoad(executeChunk) {
setTimeout(function() {
var mod = executeChunk();
mod.doSomething();
}, 500);
}, function onError() {
// error happened
});
To make async-module-loader
work correctly you need to add AsyncModulePlugin
to your plugins.
// webpack.config.js
var AsyncModulePlugin = require('async-module-loader/plugin');
module.exports = {
// ...
plugins: [
// ... other plugins
new AsyncModulePlugin()
]
// ...
}
-
name
: Use this to specify output name for requested chunk. See webpack documentation -
promise
: Use this to return a promise fromasync-module-loader
. -
noexec
: Use this to delay chunk execution