! NO LONGER MAINTAINED !

This module is deprecated and will no longer be maintained.

In most cases, you can replace the functionality by using dynamic 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 from file.bundle.js and creates a chunk from this module with the name my-chank-name

---

Bundle Loader

Bundle loader for webpack

Install

npm i bundle-loader --save

Usage

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 the require('file.js') in a require.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.

Options

Name	Type	Default	Description
lazy	{Boolean}	false	Loads the imported bundle asynchronously
name	{String}	[id].[name]	Configure a custom filename for your imported bundle

lazy

The file is requested when you require the bundle-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

name

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

webpack.config.js

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

⚠️ 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 options parameter.

Examples

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 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 options parameter does not work correctly.

Maintainers

Juho Vepsäläinen

Joshua Wiens

Michael Ciniawsky

Alexander Krasnoyarov