{"id":19396,"library":"bundle-loader","title":"Bundle Loader","description":"Webpack loader that wraps modules in a require.ensure block to create separate chunks for lazy loading. Version 0.5.6 is the current stable release; last updated February 2018. Key differentiator: simple callback-based API for loading code-split bundles on demand, with options for lazy loading and custom chunk naming. Unlike dynamic import(), it uses webpack's legacy require.ensure and is best suited for webpack 1–3 projects. No longer actively maintained; users should migrate to webpack's built-in dynamic import or @loadable-component.","status":"maintenance","version":"0.5.6","language":"javascript","source_language":"en","source_url":"https://github.com/webpack-contrib/bundle-loader","tags":["javascript"],"install":[{"cmd":"npm install bundle-loader","lang":"bash","label":"npm"},{"cmd":"yarn add bundle-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add bundle-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used for parsing loader options and interpolating names","package":"loader-utils","optional":false}],"imports":[{"note":"bundle-loader returns a function that takes a callback; the callback receives the module exports. Inline loader syntax is deprecated.","wrong":"const bundle = require('bundle-loader!./file.bundle.js');","symbol":"bundle-loader","correct":"import bundle from './file.bundle.js';"},{"note":"CommonJS require returns the same callback-wrapped function as ESM import. Avoid inline loader syntax.","wrong":"const bundle = require('bundle-loader!./file.bundle.js');","symbol":"bundle-loader (CommonJS)","correct":"const bundle = require('./file.bundle.js');"},{"note":"Use module.rules (webpack 2+) and options object instead of inline query strings and loaders array.","wrong":"module.exports = { module: { loaders: [ { test: /\\.bundle\\.js$/, loader: 'bundle-loader?lazy=true' } ] } };","symbol":"Options with webpack config","correct":"module.exports = { module: { rules: [ { test: /\\.bundle\\.js$/, use: { loader: 'bundle-loader', options: { lazy: true } } } ] } };"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  entry: './App.js',\n  output: {\n    path: __dirname + '/dist',\n    filename: '[name].js',\n    chunkFilename: '[name].[id].js'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.bundle\\.js$/,\n        use: {\n          loader: 'bundle-loader',\n          options: {\n            lazy: true,\n            name: '[name]'\n          }\n        }\n      }\n    ]\n  }\n};\n\n// App.js\nimport loadLazyModule from './lazy.bundle.js';\n\n// The module is not loaded until the callback is invoked\ndocument.getElementById('button').addEventListener('click', () => {\n  loadLazyModule((module) => {\n    console.log('Lazy module loaded:', module);\n  });\n});","lang":"javascript","description":"Shows how to set up bundle-loader in webpack config and use it to lazy load a module only on user click."},"warnings":[{"fix":"Replace bundle-loader usage with dynamic import() and webpack's magic comments.","message":"bundle-loader uses legacy require.ensure which is discouraged in webpack 4+. Use dynamic import() instead.","severity":"deprecated","affected_versions":">=0.5.6"},{"fix":"Set output.chunkFilename in webpack config (e.g., '[name].[id].js') and use the name option to control chunk naming.","message":"Chunks generated by bundle-loader respect output.chunkFilename, not output.filename. Default chunkFilename may produce unexpected filenames.","severity":"gotcha","affected_versions":">=0.5.0"},{"fix":"Use [name] in the name option to set a custom name; add hash via output.chunkFilename instead.","message":"When using the name option, [name] refers to the custom name set in options, not the original module name. [hash] does not work correctly in the name option.","severity":"gotcha","affected_versions":">=0.5.0"},{"fix":"Use module.rules array with use/loader property.","message":"In webpack 2+, the loader configuration must use module.rules instead of module.loaders. Using loaders will break silently.","severity":"breaking","affected_versions":">=0.5.4"},{"fix":"Consider migrating to dynamic import() or a modern code-splitting library like @loadable/component.","message":"The package is no longer actively maintained. Last release was in 2018. No new features or bug fixes are expected.","severity":"deprecated","affected_versions":">=0.5.6"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure the loader is applied to the correct file pattern and consider upgrading to dynamic import(). For webpack 4, use output.enabledChunkLoadingTypes or migrate.","cause":"bundle-loader is used with webpack 4+ which removed require.ensure or the loader is not applied correctly.","error":"require.ensure is not a function"},{"fix":"Run 'npm install bundle-loader --save-dev' and ensure webpack is configured to resolve node_modules loaders.","cause":"bundle-loader is not installed or webpack configuration is missing resolveLoader.","error":"Module not found: Error: Can't resolve 'bundle-loader'"},{"fix":"Use webpack 4 or migrate to dynamic import(). This is a compatibility issue.","cause":"Using bundle-loader with webpack 5 which deprecated the entrypoints API.","error":"Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}