bundle-loader

Install

npm i bundle-loader --save

Usage

Documentation: Using loaders

// The chunk is requested, when you require the bundle
var waitForChunk = require("bundle-loader!./file.js");

// To wait until the chunk is available (and get the exports)
//  you need to async wait for it.
waitForChunk(function(file) {
    // use file like it was required with
    // var file = require("./file.js");
});
// wraps the require in a require.ensure block

The file is requested when you require the bundle loader. If you want it to request it lazy, use:

var load = require("bundle-loader?lazy!./file.js");

// The chunk is not requested until you call the load function
load(function(file) {

});

name query parameter

You may set name for a bundle using the name query parameter. See documentation.

Note chunks created by the loader will be named according to the output.chunkFilename rule, which defaults to [id].[name]. Here [name] corresponds to the chunk name set in the name query parameter.

Example:

require("bundle-loader?lazy&name=my-chunk!./file.js");
require("bundle-loader?lazy&name=[name]!./file.js");

And the WebPack configuration:

module.exports = {
   entry: { ... },
   output : {
      path : ...,
      filename : '[name].js',
      chunkFilename : '[name]-[id].js', // or whatever other format you want.
   },
}

Normal chunks will show up using the filename rule above, and be named according to their chunkname. Chunks from bundle-loader, however will load using the chunkFilename rule, so the example files will produce my-chunk-1.js and file-2.js respectively.

You can also use chunkFilename to add hash values to the filename, since putting [hash] in the bundle query parameter does not work correctly.