Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including bundle-loader with all npm packages installed. Try it out:

var bundleLoader = require("bundle-loader")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

bundle-loader v0.5.6

bundle loader module for webpack

npm node deps tests coverage chat

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

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.

Options

NameTypeDefaultDescription
lazy{Boolean}falseLoads 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.

Examples

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.

Maintainers


Juho Vepsäläinen

Joshua Wiens

Michael Ciniawsky

Alexander Krasnoyarov
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free