Bundle loader for webpack
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 |
##
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 thename
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.
Juho Vepsäläinen |
Joshua Wiens |
Michael Ciniawsky |
Alexander Krasnoyarov |
© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/loaders/bundle-loader