@@ -48,22 +48,36 @@ module.exports = {
48
48
};
49
49
```
50
50
51
- By default every loadable attributes (for example - ` <img src="image.png"> ` ) is imported (` const img = require('./image.png') ` or ` import img from "./image.png"" ` ).
52
- You may need to specify loaders for images in your configuration (recommended ` file-loader ` or ` url-loader ` ).
53
-
54
51
## Options
55
52
56
- | Name | Type | Default | Description |
57
- | :-----------------------------: | :------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------- : | :--------------------------------------- |
58
- | ** [ ` attributes ` ] ( #attributes ) ** | ` {Boolean\/Array\/Object} ` | ` ['source:srcset', 'img:src', 'img:srcset', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src','input:src', 'object:data', 'script:src'] ` | Enables/Disables attributes handling |
59
- | ** [ ` root ` ] ( #root ) ** | ` {String} ` | ` undefiend ` | Allow to handle root-relative attributes |
60
- | ** [ ` minimize ` ] ( #minimize ) ** | ` {Boolean\|Object} ` | ` true ` in production mode, otherwise ` false ` | Tell ` html-loader ` to minimize HTML |
61
- | ** [ ` esModule ` ] ( #esmodule ) ** | ` {Boolean} ` | ` false ` | Use ES modules syntax |
53
+ | Name | Type | Default | Description |
54
+ | :-----------------------------: | :------------------------: | :------------------------------------------: | :--------------------------------------- |
55
+ | ** [ ` attributes ` ] ( #attributes ) ** | ` {Boolean\/Array\/Object} ` | ` true ` | Enables/Disables attributes handling |
56
+ | ** [ ` root ` ] ( #root ) ** | ` {String} ` | ` undefiend ` | Allow to handle root-relative attributes |
57
+ | ** [ ` minimize ` ] ( #minimize ) ** | ` {Boolean\|Object} ` | ` true ` in production mode, otherwise ` false ` | Tell ` html-loader ` to minimize HTML |
58
+ | ** [ ` esModule ` ] ( #esmodule ) ** | ` {Boolean} ` | ` false ` | Use ES modules syntax |
62
59
63
60
### ` attributes `
64
61
65
- Type: ` Boolean|Array `
66
- Default: ` ['source:srcset', 'img:src', 'img:srcset', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src','input:src', 'object:data', 'script:src'] `
62
+ Type: ` Boolean|Array|Object `
63
+ Default: ` true `
64
+
65
+ By default every loadable attributes (for example - ` <img src="image.png"> ` ) is imported (` const img = require('./image.png') ` or ` import img from "./image.png"" ` ).
66
+ You may need to specify loaders for images in your configuration (recommended ` file-loader ` or ` url-loader ` ).
67
+
68
+ Supported tags and attributes:
69
+
70
+ - ` source:srcset `
71
+ - ` img:srcset `
72
+ - ` img:src `
73
+ - ` audio:src `
74
+ - ` video:src `
75
+ - ` track:src `
76
+ - ` embed:src `
77
+ - ` source:src `
78
+ - ` input:src `
79
+ - ` object:data `
80
+ - ` script:src `
67
81
68
82
#### ` Boolean `
69
83
@@ -112,16 +126,10 @@ module.exports = {
112
126
};
113
127
```
114
128
115
- To completely disable tag-attribute processing (for instance, if you're handling image loading on the client side) you can pass set ` false ` value.
116
-
117
129
#### ` Object `
118
130
119
- Type: ` Array `
120
- Default: ` { list: ['source:srcset', 'img:src', 'img:srcset', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src','input:src', 'object:data', 'script:src'], root: undefined } `
121
-
122
- Allows you to specify which tags and attributes to process.
123
- Pass an array of ` <tag>:<attribute> ` or ` :<attribute> ` combinations.
124
- You can specify which tag-attribute combination should be processed by this loader via the query parameter ` attributes ` , for example:
131
+ Allows you to specify which tags and attributes to process, filter them and process sources starts with ` / ` .
132
+ For example:
125
133
126
134
** webpack.config.js**
127
135
@@ -134,9 +142,18 @@ module.exports = {
134
142
loader: ' html-loader' ,
135
143
options: {
136
144
attributes: {
137
- // May be omitted
138
145
list: [' :data-src' , ' custom-elements:data-src' ],
139
- // May be omitted
146
+ filter : (attribute , value , resourcePath ) => {
147
+ // The `attribute` argument contains a name of the HTML attribute.
148
+ // The `value` argument contains a value of the HTML attribute.
149
+ // The `resourcePath` argument contains a path to the loaded HTML file.
150
+
151
+ if (value .includes (' example' )) {
152
+ return false ;
153
+ }
154
+
155
+ return true ;
156
+ },
140
157
root: ' .' ,
141
158
},
142
159
},
@@ -146,6 +163,69 @@ module.exports = {
146
163
};
147
164
```
148
165
166
+ #### ` list `
167
+
168
+ Type: ` String `
169
+ Default: https://github.com/webpack-contrib/html-loader#attributes
170
+
171
+ For example:
172
+
173
+ ** webpack.config.js**
174
+
175
+ ``` js
176
+ module .exports = {
177
+ module: {
178
+ rules: [
179
+ {
180
+ test: / \. html$ / i ,
181
+ loader: ' html-loader' ,
182
+ options: {
183
+ attributes: {
184
+ list: [' :data-src' , ' custom-elements:data-src' ],
185
+ },
186
+ },
187
+ },
188
+ ],
189
+ },
190
+ };
191
+ ```
192
+
193
+ #### ` filter `
194
+
195
+ Type: ` Function `
196
+ Default: ` undefined `
197
+
198
+ Allow to filter sources. All filtered sources will not be resolved (left in the code as they were written).
199
+ All non requestable sources (for example ` <img src="javascript:void(0)"> ` ) do not handle by default.
200
+
201
+ ``` js
202
+ module .exports = {
203
+ module: {
204
+ rules: [
205
+ {
206
+ test: / \. html$ / i ,
207
+ loader: ' html-loader' ,
208
+ options: {
209
+ attributes: {
210
+ filter : (attribute , value , resourcePath ) => {
211
+ // The `attribute` argument contains a name of the HTML attribute.
212
+ // The `value` argument contains a value of the HTML attribute.
213
+ // The `resourcePath` argument contains a path to the loaded HTML file.
214
+
215
+ if (value .includes (' example' )) {
216
+ return false ;
217
+ }
218
+
219
+ return true ;
220
+ },
221
+ },
222
+ },
223
+ },
224
+ ],
225
+ },
226
+ };
227
+ ```
228
+
149
229
#### ` root `
150
230
151
231
Type: ` String `
@@ -185,16 +265,16 @@ Tell `html-loader` to minimize HTML.
185
265
186
266
The enabled rules for minimizing by default are the following ones:
187
267
188
- - collapseWhitespace
189
- - conservativeCollapse
190
- - keepClosingSlash
191
- - minifyCSS
192
- - minifyJS
193
- - removeAttributeQuotes
194
- - removeComments
195
- - removeScriptTypeAttributes
196
- - removeStyleTypeAttributes
197
- - useShortDoctype
268
+ - ` collapseWhitespace `
269
+ - ` conservativeCollapse `
270
+ - ` keepClosingSlash `
271
+ - ` minifyCSS `
272
+ - ` minifyJS `
273
+ - ` removeAttributeQuotes `
274
+ - ` removeComments `
275
+ - ` removeScriptTypeAttributes `
276
+ - ` removeStyleTypeAttributes `
277
+ - ` useShortDoctype `
198
278
199
279
** webpack.config.js**
200
280
0 commit comments