Repository files navigation

This module is deprecated and will no longer be maintained.

In most cases, you can replace the functionality by usingdynamic import instead:

index.js

import(/* webpackChunkName: "my-chunk-name" */'./file.bundle.js').then(bundle=>{// Doing something with `bundle`console.log(bundle)});

This code lazy loading imports and exports values fromfile.bundle.js and creates a chunk from this module with the namemy-chank-name

Bundle Loader

Bundle loader for webpack

npm i bundle-loader --save

webpack.config.js

module.exports={module:{rules:[{test:/\.bundle\.js$/,use:'bundle-loader'}]}}

The chunk is requested, when you require the bundle.

file.js

importbundlefrom'./file.bundle.js';

To wait until the chunk is available (and get the exports)you need to async wait for it.

bundle((file)=>{// use the file like it was requiredconstfile=require('./file.js')});

This wraps therequire('file.js') in arequire.ensure block

Multiple callbacks can be added. They will be executed in the order of addition.

bundle(callbackTwo)bundle(callbackThree)

If a callback is added after dependencies were loaded, it will be called immediately.

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

webpack.config.js

{loader:'bundle-loader',options:{lazy:true}}

importbundlefrom'./file.bundle.js'bundle((file)=>{...})

ℹ️ The chunk is not requested until you call the load function

You may set name for a bundle using thename options parameter.Seedocumentation.

webpack.config.js

{loader:'bundle-loader',options:{name:'[name]'}}

⚠️ chunks created by the loader will be named according to theoutput.chunkFilename rule, which defaults to[id].[name]. Here[name] corresponds to the chunk name set in thename options parameter.

importbundlefrom'./file.bundle.js'

webpack.config.js

module.exports={entry:{index:'./App.js'},output:{path:path.resolve(__dirname,'dest'),filename:'[name].js',// or whatever other format you wantchunkFilename:'[name].[id].js',},module:{rules:[{test:/\.bundle\.js$/,use:{loader:'bundle-loader',options:{name:'my-chunk'}}}]}}

Normal chunks will show up using thefilename rule above, and be named according to their[chunkname].

Chunks frombundle-loader, however will load using thechunkFilename rule, so the example files will producemy-chunk.1.js andfile-2.js respectively.

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

Juho Vepsäläinen

Joshua Wiens

Michael Ciniawsky

Alexander Krasnoyarov