Skip to content
This repository was archived by the owner on Aug 27, 2026. It is now read-only.

Commit 98412f9

Browse files
evilebottnawievilebottnawi
authored
docs: filter sources (#256)
1 parent ff0f44c commit 98412f9

2 files changed

Lines changed: 115 additions & 32 deletions

File tree

‎README.md‎

Lines changed: 111 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -48,22 +48,36 @@ module.exports = {
4848
};
4949
```
5050

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-
5451
## Options
5552

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 |
6259

6360
### `attributes`
6461

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`
6781

6882
#### `Boolean`
6983

@@ -112,16 +126,10 @@ module.exports = {
112126
};
113127
```
114128

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-
117129
#### `Object`
118130

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:
125133

126134
**webpack.config.js**
127135

@@ -134,9 +142,18 @@ module.exports = {
134142
loader: 'html-loader',
135143
options: {
136144
attributes: {
137-
// May be omitted
138145
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+
},
140157
root: '.',
141158
},
142159
},
@@ -146,6 +163,69 @@ module.exports = {
146163
};
147164
```
148165

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+
149229
#### `root`
150230

151231
Type: `String`
@@ -185,16 +265,16 @@ Tell `html-loader` to minimize HTML.
185265

186266
The enabled rules for minimizing by default are the following ones:
187267

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`
198278

199279
**webpack.config.js**
200280

‎test/validate-options.test.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,11 @@ describe('validate options', () => {
1010
['img:src'],
1111
['img:src', ':srcset'],
1212
{ root: '.' },
13-
{ list: ['img:src'], root: '.' },
1413
{ list: ['img:src'] },
14+
{ filter: () => true },
15+
{ list: ['img:src'], filter: () => true },
16+
{ list: ['img:src'], root: '.' },
17+
{ list: ['img:src'], root: '.', filter: () => true },
1518
],
1619
failure: ['true'],
1720
},

0 commit comments

Comments
 (0)