Skip to content

Commit ab57a28

Browse files
cap-Bernarditocap-Bernardito
authored
feat: added support webpackIgnore comment (#366)
1 parent 0758b1a commit ab57a28

File tree

7 files changed

+226
-0
lines changed

7 files changed

+226
-0
lines changed

‎README.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -587,6 +587,32 @@ module.exports = {
587587

588588
## Examples
589589

590+
### Disable url resolving using the `<!-- webpackIgnore: true -->` comment
591+
592+
With `<!-- webpackIgnore: true -->` comment, can to disable sources handling for next tag.
593+
594+
```html
595+
<!-- Disabled url handling for the src attribute -->
596+
<!-- webpackIgnore: true -->
597+
<img src="image.png" />
598+
599+
<!-- Disabled url handling for the src and srcset attributes -->
600+
<!-- webpackIgnore: true -->
601+
<img
602+
srcset="image.png 480w, image.png 768w"
603+
src="image.png"
604+
alt="Elva dressed as a fairy"
605+
/>
606+
607+
<!-- Disabled url handling for the content attribute -->
608+
<!-- webpackIgnore: true -->
609+
<meta itemprop="image" content="./image.png" />
610+
611+
<!-- Disabled url handling for the href attribute -->
612+
<!-- webpackIgnore: true -->
613+
<link rel="icon" type="image/png" sizes="192x192" href="./image.png" />
614+
```
615+
590616
### roots
591617

592618
With [`resolve.roots`](https://webpack.js.org/configuration/resolve/#resolveroots) can specify a list of directories where requests of server-relative URLs (starting with '/') are resolved.

‎src/plugins/sources-plugin.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,33 @@ import {
77
normalizeUrl,
88
requestify,
99
stringifyRequest,
10+
isWebpackIgnoreComment,
1011
} from '../utils';
1112

1213
export default (options) =>
1314
function process(html) {
1415
const sources = [];
1516
const document = parse5.parse(html, { sourceCodeLocationInfo: true });
1617

18+
let webpackIgnore = false;
19+
1720
traverse(document, (node) => {
1821
const { tagName, attrs: attributes, sourceCodeLocation } = node;
1922

23+
if (isWebpackIgnoreComment(node)) {
24+
webpackIgnore = true;
25+
return;
26+
}
27+
2028
if (!tagName) {
2129
return;
2230
}
2331

32+
if (webpackIgnore) {
33+
webpackIgnore = false;
34+
return;
35+
}
36+
2437
attributes.forEach((attribute) => {
2538
let { name } = attribute;
2639

‎src/utils.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1184,3 +1184,13 @@ export function c0ControlCodesExclude(source) {
11841184

11851185
return { value, startOffset };
11861186
}
1187+
1188+
const webpackIgnoreCommentRegexp = /webpackIgnore:(\s+)?true/;
1189+
1190+
export function isWebpackIgnoreComment(node) {
1191+
if (node.nodeName !== '#comment') {
1192+
return false;
1193+
}
1194+
1195+
return webpackIgnoreCommentRegexp.test(node.data);
1196+
}

‎test/__snapshots__/loader.test.js.snap

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,93 @@ exports[`loader should work with server-relative url: result 1`] = `
152152
153153
exports[`loader should work with server-relative url: warnings 1`] = `Array []`;
154154
155+
exports[`loader should work with webpackIgnore comment: errors 1`] = `Array []`;
156+
157+
exports[`loader should work with webpackIgnore comment: module 1`] = `
158+
"// Module
159+
var code = \\"<!doctype html>\\\\n<html lang=\\\\\\"en\\\\\\">\\\\n<head>\\\\n <meta charset=\\\\\\"UTF-8\\\\\\">\\\\n <meta name=\\\\\\"viewport\\\\\\"\\\\n content=\\\\\\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\\\\\\">\\\\n <meta http-equiv=\\\\\\"X-UA-Compatible\\\\\\" content=\\\\\\"ie=edge\\\\\\">\\\\n <title>Document</title>\\\\n</head>\\\\n<body>\\\\n\\\\n\\\\n<!-- webpackIgnore: true -->\\\\n<img src=\\\\\\"image.png\\\\\\" />\\\\n<!-- webpackIgnore: true --> <img src=\\\\\\"image.png\\\\\\" />\\\\n<!-- webpackIgnore: true -->\\\\n<img srcset=\\\\\\"image.png 480w, image.png 768w\\\\\\" src=\\\\\\"image.png\\\\\\" alt=\\\\\\"Elva dressed as a fairy\\\\\\">\\\\n<!-- webpackIgnore: true -->\\\\n<img data-srcset=\\\\\\"image.png 480w, image.png 800w\\\\\\" sizes=\\\\\\"(max-width: 600px) 480px, 800px\\\\\\" data-src=\\\\\\"image.png\\\\\\" alt=\\\\\\"Elva dressed as a fairy\\\\\\">\\\\n\\\\n<!-- webpackIgnore: true -->\\\\n<meta itemprop=\\\\\\"image\\\\\\" content=\\\\\\"./image.png\\\\\\" />\\\\n<!-- webpackIgnore: true -->\\\\n<meta itemprop=\\\\\\"logo\\\\\\" content=\\\\\\"./image.png\\\\\\" />\\\\n<!-- webpackIgnore: true -->\\\\n<meta itemprop=\\\\\\"screenshot\\\\\\" content=\\\\\\"./image.png\\\\\\" />\\\\n<!-- webpackIgnore: true -->\\\\n<meta property=\\\\\\"og:audio\\\\\\" content=\\\\\\"./sound.mp3\\\\\\" />\\\\n<!-- webpackIgnore: true -->\\\\n<meta property=\\\\\\"og:audio:secure_url\\\\\\" content=\\\\\\"./sound.mp3\\\\\\" />\\\\n\\\\n<!-- webpackIgnore: true -->\\\\n<link itemprop=\\\\\\"downloadUrl\\\\\\" href=\\\\\\"image.png\\\\\\">\\\\n<!-- webpackIgnore: true -->\\\\n<link itemprop=\\\\\\"contentUrl\\\\\\" href=\\\\\\"image.png\\\\\\">\\\\n<!-- webpackIgnore: true -->\\\\n<link itemprop=\\\\\\"installUrl\\\\\\" href=\\\\\\"image.png\\\\\\">\\\\n\\\\n<!-- webpackIgnore: true -->\\\\n<link rel=\\\\\\"icon\\\\\\" type=\\\\\\"image/png\\\\\\" sizes=\\\\\\"192x192\\\\\\" href=\\\\\\"./image.png\\\\\\">\\\\n<!-- webpackIgnore: true -->\\\\n<link rel=\\\\\\"apple-touch-icon\\\\\\" href=\\\\\\"./image.png\\\\\\">\\\\n<!-- webpackIgnore: true -->\\\\n<link rel=\\\\\\"manifest\\\\\\" href=\\\\\\"./site.webmanifest\\\\\\">\\\\n\\\\n<svg width=\\\\\\"200\\\\\\" height=\\\\\\"200\\\\\\">\\\\n <!-- webpackIgnore: true -->\\\\n <image xlink:href=\\\\\\"./webpack.svg\\\\\\" height=\\\\\\"200\\\\\\" width=\\\\\\"200\\\\\\"/>\\\\n</svg>\\\\n\\\\n<!-- webpackIgnore: true -->\\\\n<div data-videomp4=\\\\\\"video.mp4\\\\\\"></div>\\\\n\\\\n<!-- webpackIgnore: true -->\\\\n<video controls poster=\\\\\\"./image.png\\\\\\">\\\\n <!-- webpackIgnore: true -->\\\\n <source src=\\\\\\"example.ogg\\\\\\" type=\\\\\\"video/ogg\\\\\\">\\\\n <!-- webpackIgnore: true -->\\\\n <track src=\\\\\\"example.vtt\\\\\\" kind=\\\\\\"subtitles\\\\\\" srclang=\\\\\\"en\\\\\\" label=\\\\\\"English\\\\\\">\\\\n</video>\\\\n\\\\n<picture>\\\\n <!-- webpackIgnore: true -->\\\\n <source media=\\\\\\"(min-width: 650px)\\\\\\" srcset=\\\\\\"image.png\\\\\\">\\\\n <!-- webpackIgnore: true -->\\\\n <source media=\\\\\\"(min-width: 465px)\\\\\\" srcset=\\\\\\"image.png\\\\\\">\\\\n <!-- webpackIgnore: true -->\\\\n <img src=\\\\\\"image.png\\\\\\" alt=\\\\\\"Flowers\\\\\\" style=\\\\\\"width:auto;\\\\\\">\\\\n</picture>\\\\n\\\\n\\\\n</body>\\\\n</html>\\";
160+
// Exports
161+
export default code;"
162+
`;
163+
164+
exports[`loader should work with webpackIgnore comment: result 1`] = `
165+
"<!doctype html>
166+
<html lang=\\"en\\">
167+
<head>
168+
<meta charset=\\"UTF-8\\">
169+
<meta name=\\"viewport\\"
170+
content=\\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\\">
171+
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\">
172+
<title>Document</title>
173+
</head>
174+
<body>
175+
176+
177+
<!-- webpackIgnore: true -->
178+
<img src=\\"image.png\\" />
179+
<!-- webpackIgnore: true --> <img src=\\"image.png\\" />
180+
<!-- webpackIgnore: true -->
181+
<img srcset=\\"image.png 480w, image.png 768w\\" src=\\"image.png\\" alt=\\"Elva dressed as a fairy\\">
182+
<!-- webpackIgnore: true -->
183+
<img data-srcset=\\"image.png 480w, image.png 800w\\" sizes=\\"(max-width: 600px) 480px, 800px\\" data-src=\\"image.png\\" alt=\\"Elva dressed as a fairy\\">
184+
185+
<!-- webpackIgnore: true -->
186+
<meta itemprop=\\"image\\" content=\\"./image.png\\" />
187+
<!-- webpackIgnore: true -->
188+
<meta itemprop=\\"logo\\" content=\\"./image.png\\" />
189+
<!-- webpackIgnore: true -->
190+
<meta itemprop=\\"screenshot\\" content=\\"./image.png\\" />
191+
<!-- webpackIgnore: true -->
192+
<meta property=\\"og:audio\\" content=\\"./sound.mp3\\" />
193+
<!-- webpackIgnore: true -->
194+
<meta property=\\"og:audio:secure_url\\" content=\\"./sound.mp3\\" />
195+
196+
<!-- webpackIgnore: true -->
197+
<link itemprop=\\"downloadUrl\\" href=\\"image.png\\">
198+
<!-- webpackIgnore: true -->
199+
<link itemprop=\\"contentUrl\\" href=\\"image.png\\">
200+
<!-- webpackIgnore: true -->
201+
<link itemprop=\\"installUrl\\" href=\\"image.png\\">
202+
203+
<!-- webpackIgnore: true -->
204+
<link rel=\\"icon\\" type=\\"image/png\\" sizes=\\"192x192\\" href=\\"./image.png\\">
205+
<!-- webpackIgnore: true -->
206+
<link rel=\\"apple-touch-icon\\" href=\\"./image.png\\">
207+
<!-- webpackIgnore: true -->
208+
<link rel=\\"manifest\\" href=\\"./site.webmanifest\\">
209+
210+
<svg width=\\"200\\" height=\\"200\\">
211+
<!-- webpackIgnore: true -->
212+
<image xlink:href=\\"./webpack.svg\\" height=\\"200\\" width=\\"200\\"/>
213+
</svg>
214+
215+
<!-- webpackIgnore: true -->
216+
<div data-videomp4=\\"video.mp4\\"></div>
217+
218+
<!-- webpackIgnore: true -->
219+
<video controls poster=\\"./image.png\\">
220+
<!-- webpackIgnore: true -->
221+
<source src=\\"example.ogg\\" type=\\"video/ogg\\">
222+
<!-- webpackIgnore: true -->
223+
<track src=\\"example.vtt\\" kind=\\"subtitles\\" srclang=\\"en\\" label=\\"English\\">
224+
</video>
225+
226+
<picture>
227+
<!-- webpackIgnore: true -->
228+
<source media=\\"(min-width: 650px)\\" srcset=\\"image.png\\">
229+
<!-- webpackIgnore: true -->
230+
<source media=\\"(min-width: 465px)\\" srcset=\\"image.png\\">
231+
<!-- webpackIgnore: true -->
232+
<img src=\\"image.png\\" alt=\\"Flowers\\" style=\\"width:auto;\\">
233+
</picture>
234+
235+
236+
</body>
237+
</html>"
238+
`;
239+
240+
exports[`loader should work with webpackIgnore comment: warnings 1`] = `Array []`;
241+
155242
exports[`loader should work: errors 1`] = `Array []`;
156243
157244
exports[`loader should work: module 1`] = `

‎test/fixtures/webpackIgnore.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport"
6+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Document</title>
9+
</head>
10+
<body>
11+
12+
13+
<!-- webpackIgnore: true -->
14+
<img src="image.png" />
15+
<!-- webpackIgnore: true --> <img src="image.png" />
16+
<!-- webpackIgnore: true -->
17+
<img srcset="image.png 480w, image.png 768w" src="image.png" alt="Elva dressed as a fairy">
18+
<!-- webpackIgnore: true -->
19+
<img data-srcset="image.png 480w, image.png 800w" sizes="(max-width: 600px) 480px, 800px" data-src="image.png" alt="Elva dressed as a fairy">
20+
21+
<!-- webpackIgnore: true -->
22+
<meta itemprop="image" content="./image.png" />
23+
<!-- webpackIgnore: true -->
24+
<meta itemprop="logo" content="./image.png" />
25+
<!-- webpackIgnore: true -->
26+
<meta itemprop="screenshot" content="./image.png" />
27+
<!-- webpackIgnore: true -->
28+
<meta property="og:audio" content="./sound.mp3" />
29+
<!-- webpackIgnore: true -->
30+
<meta property="og:audio:secure_url" content="./sound.mp3" />
31+
32+
<!-- webpackIgnore: true -->
33+
<link itemprop="downloadUrl" href="image.png">
34+
<!-- webpackIgnore: true -->
35+
<link itemprop="contentUrl" href="image.png">
36+
<!-- webpackIgnore: true -->
37+
<link itemprop="installUrl" href="image.png">
38+
39+
<!-- webpackIgnore: true -->
40+
<link rel="icon" type="image/png" sizes="192x192" href="./image.png">
41+
<!-- webpackIgnore: true -->
42+
<link rel="apple-touch-icon" href="./image.png">
43+
<!-- webpackIgnore: true -->
44+
<link rel="manifest" href="./site.webmanifest">
45+
46+
<svg width="200" height="200">
47+
<!-- webpackIgnore: true -->
48+
<image xlink:href="./webpack.svg" height="200" width="200"/>
49+
</svg>
50+
51+
<!-- webpackIgnore: true -->
52+
<div data-videomp4="video.mp4"></div>
53+
54+
<!-- webpackIgnore: true -->
55+
<video controls poster="./image.png">
56+
<!-- webpackIgnore: true -->
57+
<source src="example.ogg" type="video/ogg">
58+
<!-- webpackIgnore: true -->
59+
<track src="example.vtt" kind="subtitles" srclang="en" label="English">
60+
</video>
61+
62+
<picture>
63+
<!-- webpackIgnore: true -->
64+
<source media="(min-width: 650px)" srcset="image.png">
65+
<!-- webpackIgnore: true -->
66+
<source media="(min-width: 465px)" srcset="image.png">
67+
<!-- webpackIgnore: true -->
68+
<img src="image.png" alt="Flowers" style="width:auto;">
69+
</picture>
70+
71+
72+
</body>
73+
</html>

‎test/fixtures/webpackIgnore.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import html from './webpackIgnore.html';
2+
3+
export default html;

‎test/loader.test.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -190,4 +190,18 @@ describe('loader', () => {
190190
expect(getWarnings(stats)).toMatchSnapshot('warnings');
191191
expect(getErrors(stats)).toMatchSnapshot('errors');
192192
});
193+
194+
it('should work with webpackIgnore comment', async () => {
195+
const compiler = getCompiler('webpackIgnore.js');
196+
const stats = await compile(compiler);
197+
198+
expect(getModuleSource('./webpackIgnore.html', stats)).toMatchSnapshot(
199+
'module'
200+
);
201+
expect(
202+
execute(readAsset('main.bundle.js', compiler, stats))
203+
).toMatchSnapshot('result');
204+
expect(getWarnings(stats)).toMatchSnapshot('warnings');
205+
expect(getErrors(stats)).toMatchSnapshot('errors');
206+
});
193207
});

0 commit comments

Comments
 (0)