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

import bundle from './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 required
  const file = 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.

|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
  }
}

import bundle from './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]'
  }
}

:warning: 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.

import bundle from './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 want
    chunkFilename: '[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.