@flipace/bundle-loader
v0.5.7
Published
bundle loader module for webpack
Downloads
2
Readme
[![npm][npm]][npm-url]
This bundle loader is a fork of the official bundle-loader for webpack with an added errorCb to handle chunk loading errors.
npm i @flipace/bundle-loader --save
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.bundle\.js$/,
use: '@flipace/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')
}, (err) => { console.log('An error occurred!', err); });
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|
lazy
The file is requested when you require the bundle-loader
. If you want it to request it lazy, use:
webpack.config.js
{
loader: '@flipace/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: '@flipace/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: '@flipace/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.