-
Notifications
You must be signed in to change notification settings - Fork 6
/
plugin.ts
116 lines (108 loc) · 5.02 KB
/
plugin.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import * as HtmlWebpackPlugin from 'html-webpack-plugin';
import * as minimatch from 'minimatch';
type AssetMatchFunction = (asset: HtmlWebpackPlugin.HtmlTagObject) => boolean;
export type AssetMatcher = (
string
| RegExp
| AssetMatchFunction
);
export interface SkipAssetsConfig {
/**
* skipAssets {string | RegExp} - backwards compatible option
*/
skipAssets?: (AssetMatcher)[];
/**
* excludeAssets {string | RegExp} - backwards compatible option
*/
excludeAssets?: (AssetMatcher)[]; // for backwards compatibility
// in case I want to add other optional configs later without breaking old uses
}
const PLUGIN_NAME = 'HtmlSkipAssetsPlugin';
export class HtmlWebpackSkipAssetsPlugin {
constructor(
private _config: SkipAssetsConfig = {skipAssets: [], excludeAssets: []}
) {
}
apply(compiler) {
if (compiler.hooks) {
// webpack 4 support
compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
if (compilation.hooks.htmlWebpackPluginAlterAssetTags) {
// html webpack 3
compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(
PLUGIN_NAME,
(data, cb) => {
const filters = [
...(this._config.skipAssets || []),
...(this._config.excludeAssets || []),
...(data.plugin.options.skipAssets || []),
...(data.plugin.options.excludeAssets || []),
];
data.head = this._skipAssets(data.head, filters);
data.body = this._skipAssets(data.body, filters);
return cb(null, data);
}
)
} else if (HtmlWebpackPlugin && HtmlWebpackPlugin.getHooks) {
// html-webpack 4
const hooks = HtmlWebpackPlugin.getHooks(compilation);
hooks.alterAssetTags.tapAsync(
PLUGIN_NAME,
(data, cb) => {
const filters = [
...(this._config.skipAssets || []),
...(this._config.excludeAssets || []),
...(data.plugin['options'].skipAssets || []),
...(data.plugin['options'].excludeAssets || []),
];
data.assetTags.scripts = this._skipAssets(data.assetTags.scripts, filters);
data.assetTags.styles = this._skipAssets(data.assetTags.styles, filters);
data.assetTags.meta = this._skipAssets(data.assetTags.meta, filters);
return cb(null, data);
}
)
} else {
throw new Error('Cannot find appropriate compilation hook');
}
});
} else {
// Hook into the html-webpack-plugin processing
compiler.plugin('compilation', (compilation) => {
compilation.plugin('html-webpack-plugin-alter-asset-tags', (htmlPluginData, callback) => {
const filters = [
...(this._config.skipAssets || []),
...(this._config.excludeAssets || []),
...(htmlPluginData.plugin.options.skipAssets || []),
...(htmlPluginData.plugin.options.excludeAssets || []),
];
htmlPluginData.head = this._skipAssets(htmlPluginData.head, filters);
htmlPluginData.body = this._skipAssets(htmlPluginData.body, filters);
return callback(null, htmlPluginData);
});
});
}
}
private _skipAssets(assets: HtmlWebpackPlugin.HtmlTagObject[], matchers: AssetMatcher[]): any[] {
return assets.filter(a => {
const skipped = matchers.some(matcher => {
if (!matcher) {
return false;
}
const assetUrl: string = (a.attributes.src ?? a.attributes.href ?? '') as string;
if (typeof matcher === 'string') {
return minimatch(assetUrl, matcher);
}
if (matcher.constructor && matcher.constructor.name === 'RegExp') {
const regexMatcher = (matcher as RegExp);
return !!(assetUrl.match(regexMatcher));
}
if (typeof matcher === 'function') {
const matchesCallback = matcher(a);
return !!(matchesCallback);
}
return false;
});
return !skipped;
});
}
}