You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
// The chunk is requested, when you require the bundle
25
-
var waitForChunk =require("bundle-loader!./file.js");
25
+
**webpack.config.js**
26
+
```js
27
+
module.exports= {
28
+
module: {
29
+
rules: [
30
+
{
31
+
test:/\.bundle\.js$/,
32
+
use:'bundle-loader'
33
+
}
34
+
]
35
+
}
36
+
}
37
+
```
38
+
39
+
The chunk is requested, when you require the bundle.
40
+
41
+
**file.js**
42
+
```js
43
+
importbundlefrom'./file.bundle.js';
44
+
```
45
+
46
+
To wait until the chunk is available (and get the exports)
47
+
you need to async wait for it.
26
48
27
-
// To wait until the chunk is available (and get the exports)
28
-
// you need to async wait for it.
29
-
waitForChunk(function(file) {
30
-
// use file like it was required with
31
-
// var file = require("./file.js");
49
+
```js
50
+
bundle((file) => {
51
+
// use the file like it was required
52
+
constfile=require('./file.js')
32
53
});
33
-
// wraps the require in a require.ensure block
54
+
```
55
+
56
+
This wraps the `require('file.js')` in a `require.ensure` block
34
57
35
-
// Multiple callbacks can be added. They will be executed in the order of addition.
36
-
waitForChunk(callbackTwo);
37
-
waitForChunk(callbackThree);
38
-
// If a callback is added after dependencies were loaded, it will be called immediately.
58
+
Multiple callbacks can be added. They will be executed in the order of addition.
59
+
60
+
```js
61
+
bundle(callbackTwo)
62
+
bundle(callbackThree)
39
63
```
40
64
41
-
The file is requested when you require the bundle loader. If you want it to request it lazy, use:
65
+
If a callback is added after dependencies were loaded, it will be called immediately.
42
66
43
-
```javascript
44
-
var load =require("bundle-loader?lazy!./file.js");
67
+
<h2align="center">Options</h2>
45
68
46
-
// The chunk is not requested until you call the load function
47
-
load(function(file) {
69
+
|Name|Type|Default|Description|
70
+
|:--:|:--:|:-----:|:----------|
71
+
|**`lazy`**|`{Boolean}`|`false`|Loads the imported bundle asynchronously|
72
+
|**`name`**|`{String}`|`[id].[name]`|Configure a custom filename for your imported bundle|
48
73
49
-
});
74
+
### `lazy`
75
+
76
+
The file is requested when you require the `bundle-loader`. If you want it to request it lazy, use:
77
+
78
+
**webpack.config.js**
79
+
```js
80
+
{
81
+
loader:'bundle-loader',
82
+
options: {
83
+
lazy:true
84
+
}
85
+
}
50
86
```
51
-
### `name` query parameter
52
87
53
-
You may set name for a bundle using the `name` query parameter.
88
+
```js
89
+
importbundlefrom'./file.bundle.js'
90
+
91
+
bundle((file) => {...})
92
+
```
93
+
94
+
> ℹ️ The chunk is not requested until you call the load function
95
+
96
+
### `name`
97
+
98
+
You may set name for a bundle using the `name` options parameter.
54
99
See [documentation](https://github.com/webpack/loader-utils#interpolatename).
55
100
56
-
**Note** chunks created by the loader will be named according to the
57
-
[`output.chunkFilename`](https://webpack.js.org/configuration/output/#output-chunkfilename) rule, which defaults to `[id].[name]`.
58
-
Here `[name]` corresponds to the chunk name set in the `name` query parameter.
101
+
**webpack.config.js**
102
+
```js
103
+
{
104
+
loader:'bundle-loader',
105
+
options: {
106
+
name:'[name]'
107
+
}
108
+
}
109
+
```
110
+
111
+
> :warning: chunks created by the loader will be named according to the
112
+
[`output.chunkFilename`](https://webpack.js.org/configuration/output/#output-chunkfilename) rule, which defaults to `[id].[name]`. Here `[name]` corresponds to the chunk name set in the `name` options parameter.
chunkFilename :'[name]-[id].js', // or whatever other format you want.
74
-
},
123
+
entry: {
124
+
index:'./App.js'
125
+
},
126
+
output: {
127
+
path:path.resolve(__dirname, 'dest'),
128
+
filename:'[name].js',
129
+
// or whatever other format you want
130
+
chunkFilename:'[name].[id].js',
131
+
},
132
+
module: {
133
+
rules: [
134
+
{
135
+
test:/\.bundle\.js$/,
136
+
use: {
137
+
loader:'bundle-loader'
138
+
options: {
139
+
name:'my-chunk'
140
+
}
141
+
}
142
+
}
143
+
]
144
+
}
75
145
}
76
146
```
77
147
78
-
Normal chunks will show up using the `filename` rule above, and be named according to their chunkname.
79
-
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.
148
+
Normal chunks will show up using the `filename` rule above, and be named according to their `[chunkname]`.
149
+
150
+
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.
80
151
81
-
You can also use `chunkFilename` to add hash values to the filename, since putting `[hash]` in the bundle query parameter does not work correctly.
152
+
You can also use `chunkFilename` to add hash values to the filename, since putting `[hash]` in the bundle options parameter does not work correctly.
0 commit comments