Skip to content

Commit ec75517

Browse files
alexander-akaitalexander-akait
authored
refactor: code
1 parent ab57a28 commit ec75517

File tree

5 files changed

+127
-42
lines changed

5 files changed

+127
-42
lines changed

‎src/parse5-traverse.js‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎src/plugins/sources-plugin.js‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,40 @@
11
import parse5 from 'parse5';
22

3-
import traverse from '../parse5-traverse';
4-
53
import {
4+
traverse,
65
getFilter,
76
normalizeUrl,
87
requestify,
98
stringifyRequest,
10-
isWebpackIgnoreComment,
9+
webpackIgnoreCommentRegexp,
1110
} from '../utils';
1211

1312
export default (options) =>
1413
function process(html) {
1514
const sources = [];
1615
const document = parse5.parse(html, { sourceCodeLocationInfo: true });
1716

18-
let webpackIgnore = false;
17+
let needIgnore = false;
1918

2019
traverse(document, (node) => {
2120
const { tagName, attrs: attributes, sourceCodeLocation } = node;
2221

23-
if (isWebpackIgnoreComment(node)) {
24-
webpackIgnore = true;
22+
if (node.nodeName === '#comment') {
23+
const match = node.data.match(webpackIgnoreCommentRegexp);
24+
25+
if (match) {
26+
needIgnore = match[2] === 'true';
27+
}
28+
2529
return;
2630
}
2731

2832
if (!tagName) {
2933
return;
3034
}
3135

32-
if (webpackIgnore) {
33-
webpackIgnore = false;
36+
if (needIgnore) {
37+
needIgnore = false;
3438
return;
3539
}
3640

‎src/utils.js‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1185,12 +1185,29 @@ export function c0ControlCodesExclude(source) {
11851185
return { value, startOffset };
11861186
}
11871187

1188-
const webpackIgnoreCommentRegexp = /webpackIgnore:(\s+)?true/;
1188+
export function traverse(root, callback) {
1189+
const visit = (node, parent) => {
1190+
let res;
11891191

1190-
export function isWebpackIgnoreComment(node) {
1191-
if (node.nodeName !== '#comment') {
1192-
return false;
1193-
}
1192+
if (callback) {
1193+
res = callback(node, parent);
1194+
}
1195+
1196+
let { childNodes } = node;
1197+
1198+
// in case a <template> tag is in the middle of the HTML: https://github.com/JPeer264/node-rcs-core/issues/58
1199+
if (node.content && Array.isArray(node.content.childNodes)) {
1200+
({ childNodes } = node.content);
1201+
}
11941202

1195-
return webpackIgnoreCommentRegexp.test(node.data);
1203+
if (res !== false && Array.isArray(childNodes) && childNodes.length >= 0) {
1204+
childNodes.forEach((child) => {
1205+
visit(child, node);
1206+
});
1207+
}
1208+
};
1209+
1210+
visit(root, null);
11961211
}
1212+
1213+
export const webpackIgnoreCommentRegexp = /webpackIgnore:(\s+)?(true|false)/;

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

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,8 +155,12 @@ exports[`loader should work with server-relative url: warnings 1`] = `Array []`;
155155
exports[`loader should work with webpackIgnore comment: errors 1`] = `Array []`;
156156
157157
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>\\";
158+
"// Imports
159+
import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from \\"../../src/runtime/getUrl.js\\";
160+
var ___HTML_LOADER_IMPORT_0___ = new URL(\\"./image.png\\", import.meta.url);
161+
// Module
162+
var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
163+
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<!-- webpackIgnore: true -->\\\\n<!-- webpackIgnore: false -->\\\\n<img src=\\\\\\"\\" + ___HTML_LOADER_REPLACEMENT_0___ + \\"\\\\\\" />\\\\n\\\\n<!-- webpackIgnore: true -->\\\\n<!-- webpackIgnore: false -->\\\\n<!-- webpackIgnore: true -->\\\\n<img src=\\\\\\"image.png\\\\\\" />\\\\n\\\\n<!-- webpackIgnore: -->\\\\n<img src=\\\\\\"\\" + ___HTML_LOADER_REPLACEMENT_0___ + \\"\\\\\\" />\\\\n\\\\n<!-- webpackIgnore: q -->\\\\n<img src=\\\\\\"\\" + ___HTML_LOADER_REPLACEMENT_0___ + \\"\\\\\\" />\\\\n\\\\n<!-- webpackIgnore:true -->\\\\n<img src=\\\\\\"image.png\\\\\\" />\\\\n\\\\n<!-- webpackIgnore: true -->\\\\n<img src=\\\\\\"image.png\\\\\\" />\\\\n\\\\n<!-- webpackIgnore: true --><img src=\\\\\\"image.png\\\\\\" />\\\\n<!-- webpackIgnore: false --><img src=\\\\\\"\\" + ___HTML_LOADER_REPLACEMENT_0___ + \\"\\\\\\" />\\\\n<!-- webpackIgnore: true --><!-- webpackIgnore: false --><img src=\\\\\\"\\" + ___HTML_LOADER_REPLACEMENT_0___ + \\"\\\\\\" />\\\\n<!-- webpackIgnore: false --><!-- webpackIgnore: true --><img src=\\\\\\"image.png\\\\\\" />\\\\n\\\\n\\\\n<!-- webpackIgnore: true -->\\\\n<div></div>\\\\n<img src=\\\\\\"\\" + ___HTML_LOADER_REPLACEMENT_0___ + \\"\\\\\\" />\\\\n\\\\n<!-- webpackIgnore: true -->\\\\n<br>\\\\n<img src=\\\\\\"\\" + ___HTML_LOADER_REPLACEMENT_0___ + \\"\\\\\\" />\\\\n\\\\n<!-- webpackIgnore: true -->\\\\n<br />\\\\n<img src=\\\\\\"\\" + ___HTML_LOADER_REPLACEMENT_0___ + \\"\\\\\\" />\\\\n\\\\n<br />\\\\n<!-- webpackIgnore: true -->\\\\n<img src=\\\\\\"image.png\\\\\\" />\\\\n\\\\n</body>\\\\n</html>\\";
160164
// Exports
161165
export default code;"
162166
`;
@@ -233,6 +237,49 @@ exports[`loader should work with webpackIgnore comment: result 1`] = `
233237
</picture>
234238
235239
240+
<!-- webpackIgnore: true -->
241+
<!-- webpackIgnore: false -->
242+
<img src=\\"replaced_file_protocol_/webpack/public/path/image.png\\" />
243+
244+
<!-- webpackIgnore: true -->
245+
<!-- webpackIgnore: false -->
246+
<!-- webpackIgnore: true -->
247+
<img src=\\"image.png\\" />
248+
249+
<!-- webpackIgnore: -->
250+
<img src=\\"replaced_file_protocol_/webpack/public/path/image.png\\" />
251+
252+
<!-- webpackIgnore: q -->
253+
<img src=\\"replaced_file_protocol_/webpack/public/path/image.png\\" />
254+
255+
<!-- webpackIgnore:true -->
256+
<img src=\\"image.png\\" />
257+
258+
<!-- webpackIgnore: true -->
259+
<img src=\\"image.png\\" />
260+
261+
<!-- webpackIgnore: true --><img src=\\"image.png\\" />
262+
<!-- webpackIgnore: false --><img src=\\"replaced_file_protocol_/webpack/public/path/image.png\\" />
263+
<!-- webpackIgnore: true --><!-- webpackIgnore: false --><img src=\\"replaced_file_protocol_/webpack/public/path/image.png\\" />
264+
<!-- webpackIgnore: false --><!-- webpackIgnore: true --><img src=\\"image.png\\" />
265+
266+
267+
<!-- webpackIgnore: true -->
268+
<div></div>
269+
<img src=\\"replaced_file_protocol_/webpack/public/path/image.png\\" />
270+
271+
<!-- webpackIgnore: true -->
272+
<br>
273+
<img src=\\"replaced_file_protocol_/webpack/public/path/image.png\\" />
274+
275+
<!-- webpackIgnore: true -->
276+
<br />
277+
<img src=\\"replaced_file_protocol_/webpack/public/path/image.png\\" />
278+
279+
<br />
280+
<!-- webpackIgnore: true -->
281+
<img src=\\"image.png\\" />
282+
236283
</body>
237284
</html>"
238285
`;

‎test/fixtures/webpackIgnore.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,5 +69,48 @@
6969
</picture>
7070

7171

72+
<!-- webpackIgnore: true -->
73+
<!-- webpackIgnore: false -->
74+
<img src="image.png" />
75+
76+
<!-- webpackIgnore: true -->
77+
<!-- webpackIgnore: false -->
78+
<!-- webpackIgnore: true -->
79+
<img src="image.png" />
80+
81+
<!-- webpackIgnore: -->
82+
<img src="image.png" />
83+
84+
<!-- webpackIgnore: q -->
85+
<img src="image.png" />
86+
87+
<!-- webpackIgnore:true -->
88+
<img src="image.png" />
89+
90+
<!-- webpackIgnore: true -->
91+
<img src="image.png" />
92+
93+
<!-- webpackIgnore: true --><img src="image.png" />
94+
<!-- webpackIgnore: false --><img src="image.png" />
95+
<!-- webpackIgnore: true --><!-- webpackIgnore: false --><img src="image.png" />
96+
<!-- webpackIgnore: false --><!-- webpackIgnore: true --><img src="image.png" />
97+
98+
99+
<!-- webpackIgnore: true -->
100+
<div></div>
101+
<img src="image.png" />
102+
103+
<!-- webpackIgnore: true -->
104+
<br>
105+
<img src="image.png" />
106+
107+
<!-- webpackIgnore: true -->
108+
<br />
109+
<img src="image.png" />
110+
111+
<br />
112+
<!-- webpackIgnore: true -->
113+
<img src="image.png" />
114+
72115
</body>
73116
</html>

0 commit comments

Comments
 (0)