Skip to content

Commit 73d2a66

Browse files
committed
feat: improve ssr
1 parent e5036c8 commit 73d2a66

File tree

2 files changed

+24
-5
lines changed

2 files changed

+24
-5
lines changed

index.js

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -123,12 +123,20 @@ class HtmlWebpackPlugin {
123123
return Promise.reject(new Error('The child compilation didn\'t provide a result'));
124124
}
125125
// The LibraryTemplatePlugin stores the template result in a local variable.
126-
// To extract the result during the evaluation this part has to be removed.
127-
if (source && source.indexOf('HTML_WEBPACK_PLUGIN_RESULT') >= 0) {
126+
// By adding it to the end the value gets extracted during evaluation
127+
if (source.indexOf('HTML_WEBPACK_PLUGIN_RESULT') >= 0) {
128128
source += ';\nHTML_WEBPACK_PLUGIN_RESULT';
129129
}
130130
const templateWithoutLoaders = templateFilename.replace(/^.+!/, '').replace(/\?.+$/, '');
131-
const vmContext = vm.createContext({ HTML_WEBPACK_PLUGIN: true, require: require, htmlWebpackPluginPublicPath: publicPath, ...global });
131+
const vmContext = vm.createContext({
132+
...global,
133+
HTML_WEBPACK_PLUGIN: true,
134+
require: require,
135+
htmlWebpackPluginPublicPath:
136+
publicPath,
137+
URL: require('url').URL,
138+
__filename: templateWithoutLoaders
139+
});
132140
const vmScript = new vm.Script(source, { filename: templateWithoutLoaders });
133141
// Evaluate code and cast to string
134142
let newSource;
@@ -147,7 +155,8 @@ class HtmlWebpackPlugin {
147155
}
148156

149157
/**
150-
* apply is called by the webpack main compiler during the start phase
158+
* connect the html-webpack-plugin to the webpack compiler lifecycle hooks
159+
*
151160
* @param {import('webpack').Compiler} compiler
152161
* @param {ProcessedHtmlWebpackOptions} options
153162
* @param {HtmlWebpackPlugin} plugin

lib/child-compiler.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ class HtmlWebpackChildCompiler {
7575
const webpack = mainCompilation.compiler.webpack;
7676
const Compilation = webpack.Compilation;
7777

78+
const NodeTemplatePlugin = webpack.node.NodeTemplatePlugin;
7879
const NodeTargetPlugin = webpack.node.NodeTargetPlugin;
7980
const LoaderTargetPlugin = webpack.LoaderTargetPlugin;
8081
const EntryPlugin = webpack.EntryPlugin;
@@ -103,6 +104,7 @@ class HtmlWebpackChildCompiler {
103104
const childCompiler = mainCompilation.createChildCompiler(compilerName, outputOptions, [
104105
// Compile the template to nodejs javascript
105106
new NodeTargetPlugin(),
107+
new NodeTemplatePlugin(),
106108
new LoaderTargetPlugin('node'),
107109
new webpack.library.EnableLibraryPlugin('var')
108110
]);
@@ -114,10 +116,18 @@ class HtmlWebpackChildCompiler {
114116

115117
// Add all templates
116118
this.templates.forEach((template, index) => {
117-
new EntryPlugin(childCompiler.context, 'data:text/javascript,__webpack_public_path__ = htmlWebpackPluginPublicPath;', `HtmlWebpackPlugin_${index}-${this.id}`).apply(childCompiler);
119+
new EntryPlugin(childCompiler.context, 'data:text/javascript,__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;', `HtmlWebpackPlugin_${index}-${this.id}`).apply(childCompiler);
118120
new EntryPlugin(childCompiler.context, template, `HtmlWebpackPlugin_${index}-${this.id}`).apply(childCompiler);
119121
});
120122

123+
// The templates are compiled and executed by NodeJS - similar to server side rendering
124+
// Unfortunately this causes issues as some loaders require an absolute URL to support ES Modules
125+
// The following config enables relative URL support for the child compiler
126+
childCompiler.options.module = { ...childCompiler.options.module };
127+
childCompiler.options.module.parser = { ...childCompiler.options.module.parser };
128+
childCompiler.options.module.parser.javascript = { ...childCompiler.options.module.parser.javascript,
129+
url: 'relative' };
130+
121131
this.compilationStartedTimestamp = new Date().getTime();
122132
this.compilationPromise = new Promise((resolve, reject) => {
123133
const extractedAssets = [];

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy