child-compiler.js
7.6 KB
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
// @ts-check
/** @typedef {import("webpack/lib/Compilation.js")} WebpackCompilation */
/** @typedef {import("webpack/lib/Compiler.js")} WebpackCompiler */
/** @typedef {import("webpack/lib/Chunk.js")} WebpackChunk */
'use strict';
/**
* @file
* This file uses webpack to compile a template with a child compiler.
*
* [TEMPLATE] -> [JAVASCRIPT]
*
*/
'use strict';
let instanceId = 0;
/**
* The HtmlWebpackChildCompiler is a helper to allow reusing one childCompiler
* for multiple HtmlWebpackPlugin instances to improve the compilation performance.
*/
class HtmlWebpackChildCompiler {
/**
*
* @param {string[]} templates
*/
constructor (templates) {
/** Id for this ChildCompiler */
this.id = instanceId++;
/**
* @type {string[]} templateIds
* The template array will allow us to keep track which input generated which output
*/
this.templates = templates;
/**
* @type {Promise<{[templatePath: string]: { content: string, hash: string, entry: WebpackChunk }}>}
*/
this.compilationPromise; // eslint-disable-line
/**
* @type {number}
*/
this.compilationStartedTimestamp; // eslint-disable-line
/**
* @type {number}
*/
this.compilationEndedTimestamp; // eslint-disable-line
/**
* All file dependencies of the child compiler
* @type {{fileDependencies: string[], contextDependencies: string[], missingDependencies: string[]}}
*/
this.fileDependencies = { fileDependencies: [], contextDependencies: [], missingDependencies: [] };
}
/**
* Returns true if the childCompiler is currently compiling
* @returns {boolean}
*/
isCompiling () {
return !this.didCompile() && this.compilationStartedTimestamp !== undefined;
}
/**
* Returns true if the childCompiler is done compiling
*/
didCompile () {
return this.compilationEndedTimestamp !== undefined;
}
/**
* This function will start the template compilation
* once it is started no more templates can be added
*
* @param {import('webpack').Compilation} mainCompilation
* @returns {Promise<{[templatePath: string]: { content: string, hash: string, entry: WebpackChunk }}>}
*/
compileTemplates (mainCompilation) {
const webpack = mainCompilation.compiler.webpack;
const Compilation = webpack.Compilation;
const NodeTemplatePlugin = webpack.node.NodeTemplatePlugin;
const NodeTargetPlugin = webpack.node.NodeTargetPlugin;
const LoaderTargetPlugin = webpack.LoaderTargetPlugin;
const EntryPlugin = webpack.EntryPlugin;
// To prevent multiple compilations for the same template
// the compilation is cached in a promise.
// If it already exists return
if (this.compilationPromise) {
return this.compilationPromise;
}
const outputOptions = {
filename: '__child-[name]',
publicPath: '',
library: {
type: 'var',
name: 'HTML_WEBPACK_PLUGIN_RESULT'
},
scriptType: /** @type {'text/javascript'} */('text/javascript'),
iife: true
};
const compilerName = 'HtmlWebpackCompiler';
// Create an additional child compiler which takes the template
// and turns it into an Node.JS html factory.
// This allows us to use loaders during the compilation
const childCompiler = mainCompilation.createChildCompiler(compilerName, outputOptions, [
// Compile the template to nodejs javascript
new NodeTargetPlugin(),
new NodeTemplatePlugin(),
new LoaderTargetPlugin('node'),
new webpack.library.EnableLibraryPlugin('var')
]);
// The file path context which webpack uses to resolve all relative files to
childCompiler.context = mainCompilation.compiler.context;
// Generate output file names
const temporaryTemplateNames = this.templates.map((template, index) => `__child-HtmlWebpackPlugin_${index}-${this.id}`);
// Add all templates
this.templates.forEach((template, index) => {
new EntryPlugin(childCompiler.context, 'data:text/javascript,__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;', `HtmlWebpackPlugin_${index}-${this.id}`).apply(childCompiler);
new EntryPlugin(childCompiler.context, template, `HtmlWebpackPlugin_${index}-${this.id}`).apply(childCompiler);
});
// The templates are compiled and executed by NodeJS - similar to server side rendering
// Unfortunately this causes issues as some loaders require an absolute URL to support ES Modules
// The following config enables relative URL support for the child compiler
childCompiler.options.module = { ...childCompiler.options.module };
childCompiler.options.module.parser = { ...childCompiler.options.module.parser };
childCompiler.options.module.parser.javascript = { ...childCompiler.options.module.parser.javascript,
url: 'relative' };
this.compilationStartedTimestamp = new Date().getTime();
this.compilationPromise = new Promise((resolve, reject) => {
const extractedAssets = [];
childCompiler.hooks.thisCompilation.tap('HtmlWebpackPlugin', (compilation) => {
compilation.hooks.processAssets.tap(
{
name: 'HtmlWebpackPlugin',
stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
},
(assets) => {
temporaryTemplateNames.forEach((temporaryTemplateName) => {
if (assets[temporaryTemplateName]) {
extractedAssets.push(assets[temporaryTemplateName]);
compilation.deleteAsset(temporaryTemplateName);
}
});
}
);
});
childCompiler.runAsChild((err, entries, childCompilation) => {
// Extract templates
const compiledTemplates = entries
? extractedAssets.map((asset) => asset.source())
: [];
// Extract file dependencies
if (entries && childCompilation) {
this.fileDependencies = { fileDependencies: Array.from(childCompilation.fileDependencies), contextDependencies: Array.from(childCompilation.contextDependencies), missingDependencies: Array.from(childCompilation.missingDependencies) };
}
// Reject the promise if the childCompilation contains error
if (childCompilation && childCompilation.errors && childCompilation.errors.length) {
const errorDetails = childCompilation.errors.map(error => {
let message = error.message;
if (error.stack) {
message += '\n' + error.stack;
}
return message;
}).join('\n');
reject(new Error('Child compilation failed:\n' + errorDetails));
return;
}
// Reject if the error object contains errors
if (err) {
reject(err);
return;
}
if (!childCompilation || !entries) {
reject(new Error('Empty child compilation'));
return;
}
/**
* @type {{[templatePath: string]: { content: string, hash: string, entry: WebpackChunk }}}
*/
const result = {};
compiledTemplates.forEach((templateSource, entryIndex) => {
// The compiledTemplates are generated from the entries added in
// the addTemplate function.
// Therefore the array index of this.templates should be the as entryIndex.
result[this.templates[entryIndex]] = {
content: templateSource,
hash: childCompilation.hash || 'XXXX',
entry: entries[entryIndex]
};
});
this.compilationEndedTimestamp = new Date().getTime();
resolve(result);
});
});
return this.compilationPromise;
}
}
module.exports = {
HtmlWebpackChildCompiler
};