npm i bundle-loader --save
// 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) {
});
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.
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.
Juho Vepsäläinen |
Joshua Wiens |
Kees Kluskens |
Sean Larkin |