Skip to content

Commit

Permalink
feat: add full support for public paths inside templates
Browse files Browse the repository at this point in the history
  • Loading branch information
jantimon committed Jan 20, 2021
1 parent e12a1ce commit a059fcf
Show file tree
Hide file tree
Showing 5 changed files with 63 additions and 6 deletions.
6 changes: 3 additions & 3 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ class HtmlWebpackPlugin {
* @param {string} templateFilename
* @returns {Promise<string | (() => string | Promise<string>)>}
*/
evaluateCompilationResult (source, templateFilename) {
evaluateCompilationResult (source, publicPath, templateFilename) {
if (!source) {
return Promise.reject(new Error('The child compilation didn\'t provide a result'));
}
Expand All @@ -127,7 +127,7 @@ class HtmlWebpackPlugin {
source += ';\nHTML_WEBPACK_PLUGIN_RESULT';
}
const templateWithoutLoaders = templateFilename.replace(/^.+!/, '').replace(/\?.+$/, '');
const vmContext = vm.createContext({ HTML_WEBPACK_PLUGIN: true, require: require, ...global });
const vmContext = vm.createContext({ HTML_WEBPACK_PLUGIN: true, require: require, htmlWebpackPluginPublicPath: publicPath, ...global });
const vmScript = new vm.Script(source, { filename: templateWithoutLoaders });
// Evaluate code and cast to string
let newSource;
Expand Down Expand Up @@ -327,7 +327,7 @@ function hookIntoCompiler (compiler, options, plugin) {
// Once everything is compiled evaluate the html factory
// and replace it with its content
return ('compiledEntry' in templateResult)
? plugin.evaluateCompilationResult(templateResult.compiledEntry.content, options.template)
? plugin.evaluateCompilationResult(templateResult.compiledEntry.content, htmlPublicPath, options.template)
: Promise.reject(new Error('Child compilation contained no compiledEntry'));
});
const templateExectutionPromise = Promise.all([assetsPromise, assetTagGroupsPromise, templateEvaluationPromise])
Expand Down
5 changes: 2 additions & 3 deletions lib/child-compiler.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,9 +88,7 @@ class HtmlWebpackChildCompiler {

const outputOptions = {
filename: '__child-[name]',
publicPath: mainCompilation.outputOptions.publicPath === 'auto'
? ''
: mainCompilation.outputOptions.publicPath,
publicPath: '',
library: {
type: 'var',
name: 'HTML_WEBPACK_PLUGIN_RESULT'
Expand All @@ -116,6 +114,7 @@ class HtmlWebpackChildCompiler {

// Add all templates
this.templates.forEach((template, index) => {
new EntryPlugin(childCompiler.context, 'data:text/javascript,__webpack_public_path__ = htmlWebpackPluginPublicPath;', `HtmlWebpackPlugin_${index}-${this.id}`).apply(childCompiler);
new EntryPlugin(childCompiler.context, template, `HtmlWebpackPlugin_${index}-${this.id}`).apply(childCompiler);
});

Expand Down
47 changes: 47 additions & 0 deletions spec/basic.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -2584,4 +2584,51 @@ describe('HtmlWebpackPlugin', () => {
]
}, ['<script defer="defer" src="index_bundle.js"></script>'], null, done);
});

it('generates relative path for asset/resource', done => {
testHtmlPlugin({
mode: 'development',
entry: path.join(__dirname, 'fixtures/index.js'),
output: {
path: OUTPUT_DIR,
filename: 'index_bundle.js',
assetModuleFilename: 'assets/demo[ext]'
},
module: {
rules: [
{ test: /\.png$/, type: 'asset/resource' }
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'html-loader!' + path.join(__dirname, 'fixtures/logo.html'),
filename: 'demo/index.js'
})
]
}, ['<img src="../assets/demo.png'], 'demo/index.js', done);
});

it('uses the absolute path for asset/resource', done => {
testHtmlPlugin({
mode: 'development',
entry: path.join(__dirname, 'fixtures/index.js'),
output: {
path: OUTPUT_DIR,
filename: 'index_bundle.js',
assetModuleFilename: 'assets/demo[ext]'
},
module: {
rules: [
{ test: /\.png$/, type: 'asset/resource' }
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'html-loader!' + path.join(__dirname, 'fixtures/logo.html'),
filename: 'demo/index.js',
publicPath: '/foo/'
})
]
}, ['<img src="/foo/assets/demo.png'], 'demo/index.js', done);
});
});
11 changes: 11 additions & 0 deletions spec/fixtures/logo.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!doctype html>
<html lang="en" manifest="foo.appcache">
<head>
<meta charset="utf-8">
<title>Example Plain file</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="./logo.png" />
</body>
</html>
Binary file added spec/fixtures/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit a059fcf

Please sign in to comment.