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
You may set name for a bundle using the name
options parameter.
See documentation.
webpack.config.js
{
loader: 'bundle-loader',
options: {
name: '[name]'
}
}
⚠️ chunks created by the loader will be named according to theoutput.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 |