Socket
Socket
Sign inDemoInstall

bundle-loader

Package Overview
Dependencies
5
Maintainers
8
Versions
13
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

bundle-loader

bundle loader module for webpack


Version published
Maintainers
8
Weekly downloads
51,494
decreased by-11.97%

Weekly downloads

Readme

Source

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

FAQs

Last updated on 05 Feb 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc