// @ts-check // Import types /** @typedef {import("./typings").HtmlTagObject} HtmlTagObject */ /** @typedef {import("./typings").Options} HtmlWebpackOptions */ /** @typedef {import("./typings").ProcessedOptions} ProcessedHtmlWebpackOptions */ /** @typedef {import("./typings").TemplateParameter} TemplateParameter */ /** @typedef {import("webpack/lib/Compiler.js")} WebpackCompiler */ /** @typedef {import("webpack/lib/Compilation.js")} WebpackCompilation */ 'use strict'; // use Polyfill for util.promisify in node versions < v8 const promisify = require('util.promisify'); const vm = require('vm'); const fs = require('fs'); const _ = require('lodash'); const path = require('path'); const loaderUtils = require('loader-utils'); const { CachedChildCompilation } = require('./lib/cached-child-compiler'); const { createHtmlTagObject, htmlTagObjectToString, HtmlTagArray } = require('./lib/html-tags'); const prettyError = require('./lib/errors.js'); const chunkSorter = require('./lib/chunksorter.js'); const getHtmlWebpackPluginHooks = require('./lib/hooks.js').getHtmlWebpackPluginHooks; const fsStatAsync = promisify(fs.stat); const fsReadFileAsync = promisify(fs.readFile); const webpackMajorVersion = Number(require('webpack/package.json').version.split('.')[0]); class HtmlWebpackPlugin { /** * @param {HtmlWebpackOptions} [options] */ constructor (options) { /** @type {HtmlWebpackOptions} */ const userOptions = options || {}; // Default options /** @type {ProcessedHtmlWebpackOptions} */ const defaultOptions = { template: 'auto', templateContent: false, templateParameters: templateParametersGenerator, filename: 'index.html', publicPath: userOptions.publicPath === undefined ? 'auto' : userOptions.publicPath, hash: false, inject: userOptions.scriptLoading !== 'defer' ? 'body' : 'head', scriptLoading: 'blocking', compile: true, favicon: false, minify: 'auto', cache: true, showErrors: true, chunks: 'all', excludeChunks: [], chunksSortMode: 'auto', meta: {}, base: false, title: 'Webpack App', xhtml: false }; /** @type {ProcessedHtmlWebpackOptions} */ this.options = Object.assign(defaultOptions, userOptions); // Default metaOptions if no template is provided if (!userOptions.template && this.options.templateContent === false && this.options.meta) { const defaultMeta = { // From https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag viewport: 'width=device-width, initial-scale=1' }; this.options.meta = Object.assign({}, this.options.meta, defaultMeta, userOptions.meta); } // Instance variables to keep caching information // for multiple builds this.childCompilerHash = undefined; this.assetJson = undefined; this.hash = undefined; this.version = HtmlWebpackPlugin.version; } /** * apply is called by the webpack main compiler during the start phase * @param {WebpackCompiler} compiler */ apply (compiler) { const self = this; this.options.template = this.getFullTemplatePath(this.options.template, compiler.context); // Inject child compiler plugin const childCompilerPlugin = new CachedChildCompilation(compiler); if (!this.options.templateContent) { childCompilerPlugin.addEntry(this.options.template); } // convert absolute filename into relative so that webpack can // generate it at correct location const filename = this.options.filename; if (path.resolve(filename) === path.normalize(filename)) { this.options.filename = path.relative(compiler.options.output.path, filename); } // `contenthash` is introduced in webpack v4.3 // which conflicts with the plugin's existing `contenthash` method, // hence it is renamed to `templatehash` to avoid conflicts this.options.filename = this.options.filename.replace(/\[(?:(\w+):)?contenthash(?::([a-z]+\d*))?(?::(\d+))?\]/ig, (match) => { return match.replace('contenthash', 'templatehash'); }); // Check if webpack is running in production mode // @see https://github.com/webpack/webpack/blob/3366421f1784c449f415cda5930a8e445086f688/lib/WebpackOptionsDefaulter.js#L12-L14 const isProductionLikeMode = compiler.options.mode === 'production' || !compiler.options.mode; const minify = this.options.minify; if (minify === true || (minify === 'auto' && isProductionLikeMode)) { /** @type { import('html-minifier-terser').Options } */ this.options.minify = { // https://www.npmjs.com/package/html-minifier-terser#options-quick-reference collapseWhitespace: true, keepClosingSlash: true, removeComments: true, removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, useShortDoctype: true }; } compiler.hooks.emit.tapAsync('HtmlWebpackPlugin', /** * Hook into the webpack emit phase * @param {WebpackCompilation} compilation * @param {(err?: Error) => void} callback */ (compilation, callback) => { // Get all entry point names for this html file const entryNames = Array.from(compilation.entrypoints.keys()); const filteredEntryNames = self.filterChunks(entryNames, self.options.chunks, self.options.excludeChunks); const sortedEntryNames = self.sortEntryChunks(filteredEntryNames, this.options.chunksSortMode, compilation); const templateResult = this.options.templateContent ? { mainCompilationHash: compilation.hash } : childCompilerPlugin.getCompilationEntryResult(this.options.template); this.childCompilerHash = templateResult.mainCompilationHash; if ('error' in templateResult) { compilation.errors.push(prettyError(templateResult.error, compiler.context).toString()); } const compiledEntries = 'compiledEntry' in templateResult ? { hash: templateResult.compiledEntry.hash, chunk: templateResult.compiledEntry.entry } : { hash: templateResult.mainCompilationHash }; const childCompilationOutputName = webpackMajorVersion === 4 ? compilation.mainTemplate.getAssetPath(this.options.filename, compiledEntries) : compilation.getAssetPath(this.options.filename, compiledEntries); // If the child compilation was not executed during a previous main compile run // it is a cached result const isCompilationCached = templateResult.mainCompilationHash !== compilation.hash; // Turn the entry point names into file paths const assets = self.htmlWebpackPluginAssets(compilation, childCompilationOutputName, sortedEntryNames, this.options.publicPath); // If the template and the assets did not change we don't have to emit the html const assetJson = JSON.stringify(self.getAssetFiles(assets)); if (isCompilationCached && self.options.cache && assetJson === self.assetJson) { return callback(); } else { self.assetJson = assetJson; } // The html-webpack plugin uses a object representation for the html-tags which will be injected // to allow altering them more easily // Just before they are converted a third-party-plugin author might change the order and content const assetsPromise = this.getFaviconPublicPath(this.options.favicon, compilation, assets.publicPath) .then((faviconPath) => { assets.favicon = faviconPath; return getHtmlWebpackPluginHooks(compilation).beforeAssetTagGeneration.promise({ assets: assets, outputName: childCompilationOutputName, plugin: self }); }); // Turn the js and css paths into grouped HtmlTagObjects const assetTagGroupsPromise = assetsPromise // And allow third-party-plugin authors to reorder and change the assetTags before they are grouped .then(({ assets }) => getHtmlWebpackPluginHooks(compilation).alterAssetTags.promise({ assetTags: { scripts: self.generatedScriptTags(assets.js), styles: self.generateStyleTags(assets.css), meta: [ ...self.generateBaseTag(self.options.base), ...self.generatedMetaTags(self.options.meta), ...self.generateFaviconTags(assets.favicon) ] }, outputName: childCompilationOutputName, plugin: self })) .then(({ assetTags }) => { // Inject scripts to body unless it set explicitly to head const scriptTarget = self.options.inject === 'head' ? 'head' : 'body'; // Group assets to `head` and `body` tag arrays const assetGroups = this.generateAssetGroups(assetTags, scriptTarget); // Allow third-party-plugin authors to reorder and change the assetTags once they are grouped return getHtmlWebpackPluginHooks(compilation).alterAssetTagGroups.promise({ headTags: assetGroups.headTags, bodyTags: assetGroups.bodyTags, outputName: childCompilationOutputName, plugin: self }); }); // Turn the compiled template into a nodejs function or into a nodejs string const templateEvaluationPromise = Promise.resolve() .then(() => { if ('error' in templateResult) { return self.options.showErrors ? prettyError(templateResult.error, compiler.context).toHtml() : 'ERROR'; } // Allow to use a custom function / string instead if (self.options.templateContent !== false) { return self.options.templateContent; } // Once everything is compiled evaluate the html factory // and replace it with its content return ('compiledEntry' in templateResult) ? self.evaluateCompilationResult(compilation, templateResult.compiledEntry.content) : Promise.reject(new Error('Child compilation contained no compiledEntry')); }); const templateExectutionPromise = Promise.all([assetsPromise, assetTagGroupsPromise, templateEvaluationPromise]) // Execute the template .then(([assetsHookResult, assetTags, compilationResult]) => typeof compilationResult !== 'function' ? compilationResult : self.executeTemplate(compilationResult, assetsHookResult.assets, { headTags: assetTags.headTags, bodyTags: assetTags.bodyTags }, compilation)); const injectedHtmlPromise = Promise.all([assetTagGroupsPromise, templateExectutionPromise]) // Allow plugins to change the html before assets are injected .then(([assetTags, html]) => { const pluginArgs = { html, headTags: assetTags.headTags, bodyTags: assetTags.bodyTags, plugin: self, outputName: childCompilationOutputName }; return getHtmlWebpackPluginHooks(compilation).afterTemplateExecution.promise(pluginArgs); }) .then(({ html, headTags, bodyTags }) => { return self.postProcessHtml(html, assets, { headTags, bodyTags }); }); const emitHtmlPromise = injectedHtmlPromise // Allow plugins to change the html after assets are injected .then((html) => { const pluginArgs = { html, plugin: self, outputName: childCompilationOutputName }; return getHtmlWebpackPluginHooks(compilation).beforeEmit.promise(pluginArgs) .then(result => result.html); }) .catch(err => { // In case anything went wrong the promise is resolved // with the error message and an error is logged compilation.errors.push(prettyError(err, compiler.context).toString()); // Prevent caching self.hash = null; return self.options.showErrors ? prettyError(err, compiler.context).toHtml() : 'ERROR'; }) .then(html => { // Allow to use [templatehash] as placeholder for the html-webpack-plugin name // See also https://survivejs.com/webpack/optimizing/adding-hashes-to-filenames/ // From https://github.com/webpack-contrib/extract-text-webpack-plugin/blob/8de6558e33487e7606e7cd7cb2adc2cccafef272/src/index.js#L212-L214 const finalOutputName = childCompilationOutputName.replace(/\[(?:(\w+):)?templatehash(?::([a-z]+\d*))?(?::(\d+))?\]/ig, (_, hashType, digestType, maxLength) => { return loaderUtils.getHashDigest(Buffer.from(html, 'utf8'), hashType, digestType, parseInt(maxLength, 10)); }); // Add the evaluated html code to the webpack assets compilation.assets[finalOutputName] = { source: () => html, size: () => html.length }; return finalOutputName; }) .then((finalOutputName) => getHtmlWebpackPluginHooks(compilation).afterEmit.promise({ outputName: finalOutputName, plugin: self }).catch(err => { console.error(err); return null; }).then(() => null)); // Once all files are added to the webpack compilation // let the webpack compiler continue emitHtmlPromise.then(() => { callback(); }); }); } /** * Evaluates the child compilation result * @param {WebpackCompilation} compilation * @param {string} source * @returns {Promise string | Promise)>} */ evaluateCompilationResult (compilation, source) { if (!source) { return Promise.reject(new Error('The child compilation didn\'t provide a result')); } // The LibraryTemplatePlugin stores the template result in a local variable. // To extract the result during the evaluation this part has to be removed. source = source.replace('var HTML_WEBPACK_PLUGIN_RESULT =', ''); const template = this.options.template.replace(/^.+!/, '').replace(/\?.+$/, ''); const vmContext = vm.createContext(_.extend({ HTML_WEBPACK_PLUGIN: true, require: require, console: console }, global)); const vmScript = new vm.Script(source, { filename: template }); // Evaluate code and cast to string let newSource; try { newSource = vmScript.runInContext(vmContext); } catch (e) { return Promise.reject(e); } if (typeof newSource === 'object' && newSource.__esModule && newSource.default) { newSource = newSource.default; } return typeof newSource === 'string' || typeof newSource === 'function' ? Promise.resolve(newSource) : Promise.reject(new Error('The loader "' + this.options.template + '" didn\'t return html.')); } /** * Generate the template parameters for the template function * @param {WebpackCompilation} compilation * @param {{ publicPath: string, js: Array, css: Array, manifest?: string, favicon?: string }} assets * @param {{ headTags: HtmlTagObject[], bodyTags: HtmlTagObject[] }} assetTags * @returns {Promise<{[key: any]: any}>} */ getTemplateParameters (compilation, assets, assetTags) { const templateParameters = this.options.templateParameters; if (templateParameters === false) { return Promise.resolve({}); } if (typeof templateParameters !== 'function' && typeof templateParameters !== 'object') { throw new Error('templateParameters has to be either a function or an object'); } const templateParameterFunction = typeof templateParameters === 'function' // A custom function can overwrite the entire template parameter preparation ? templateParameters // If the template parameters is an object merge it with the default values : (compilation, assets, assetTags, options) => Object.assign({}, templateParametersGenerator(compilation, assets, assetTags, options), templateParameters ); const preparedAssetTags = { headTags: this.prepareAssetTagGroupForRendering(assetTags.headTags), bodyTags: this.prepareAssetTagGroupForRendering(assetTags.bodyTags) }; return Promise .resolve() .then(() => templateParameterFunction(compilation, assets, preparedAssetTags, this.options)); } /** * This function renders the actual html by executing the template function * * @param {(templateParameters) => string | Promise} templateFunction * @param {{ publicPath: string, js: Array, css: Array, manifest?: string, favicon?: string }} assets * @param {{ headTags: HtmlTagObject[], bodyTags: HtmlTagObject[] }} assetTags * @param {WebpackCompilation} compilation * * @returns Promise */ executeTemplate (templateFunction, assets, assetTags, compilation) { // Template processing const templateParamsPromise = this.getTemplateParameters(compilation, assets, assetTags); return templateParamsPromise.then((templateParams) => { try { // If html is a promise return the promise // If html is a string turn it into a promise return templateFunction(templateParams); } catch (e) { compilation.errors.push(new Error('Template execution failed: ' + e)); return Promise.reject(e); } }); } /** * Html Post processing * * @param {any} html * The input html * @param {any} assets * @param {{ headTags: HtmlTagObject[], bodyTags: HtmlTagObject[] }} assetTags * The asset tags to inject * * @returns {Promise} */ postProcessHtml (html, assets, assetTags) { if (typeof html !== 'string') { return Promise.reject(new Error('Expected html to be a string but got ' + JSON.stringify(html))); } const htmlAfterInjection = this.options.inject ? this.injectAssetsIntoHtml(html, assets, assetTags) : html; const htmlAfterMinification = this.minifyHtml(htmlAfterInjection); return Promise.resolve(htmlAfterMinification); } /* * Pushes the content of the given filename to the compilation assets * @param {string} filename * @param {WebpackCompilation} compilation * * @returns {string} file basename */ addFileToAssets (filename, compilation) { filename = path.resolve(compilation.compiler.context, filename); return Promise.all([ fsStatAsync(filename), fsReadFileAsync(filename) ]) .then(([size, source]) => { return { size, source }; }) .catch(() => Promise.reject(new Error('HtmlWebpackPlugin: could not load file ' + filename))) .then(results => { const basename = path.basename(filename); compilation.fileDependencies.add(filename); compilation.assets[basename] = { source: () => results.source, size: () => results.size.size }; return basename; }); } /** * Helper to sort chunks * @param {string[]} entryNames * @param {string|((entryNameA: string, entryNameB: string) => number)} sortMode * @param {WebpackCompilation} compilation */ sortEntryChunks (entryNames, sortMode, compilation) { // Custom function if (typeof sortMode === 'function') { return entryNames.sort(sortMode); } // Check if the given sort mode is a valid chunkSorter sort mode if (typeof chunkSorter[sortMode] !== 'undefined') { return chunkSorter[sortMode](entryNames, compilation, this.options); } throw new Error('"' + sortMode + '" is not a valid chunk sort mode'); } /** * Return all chunks from the compilation result which match the exclude and include filters * @param {any} chunks * @param {string[]|'all'} includedChunks * @param {string[]} excludedChunks */ filterChunks (chunks, includedChunks, excludedChunks) { return chunks.filter(chunkName => { // Skip if the chunks should be filtered and the given chunk was not added explicity if (Array.isArray(includedChunks) && includedChunks.indexOf(chunkName) === -1) { return false; } // Skip if the chunks should be filtered and the given chunk was excluded explicity if (Array.isArray(excludedChunks) && excludedChunks.indexOf(chunkName) !== -1) { return false; } // Add otherwise return true; }); } /** * Check if the given asset object consists only of hot-update.js files * * @param {{ publicPath: string, js: Array, css: Array, manifest?: string, favicon?: string }} assets */ isHotUpdateCompilation (assets) { return assets.js.length && assets.js.every((assetPath) => /\.hot-update\.js$/.test(assetPath)); } /** * The htmlWebpackPluginAssets extracts the asset information of a webpack compilation * for all given entry names * @param {WebpackCompilation} compilation * @param {string[]} entryNames * @param {string | 'auto'} customPublicPath * @returns {{ publicPath: string, js: Array, css: Array, manifest?: string, favicon?: string }} */ htmlWebpackPluginAssets (compilation, childCompilationOutputName, entryNames, customPublicPath) { const compilationHash = compilation.hash; /** * @type {string} the configured public path to the asset root * if a path publicPath is set in the current webpack config use it otherwise * fallback to a relative path */ const webpackPublicPath = webpackMajorVersion === 4 ? compilation.mainTemplate.getPublicPath({ hash: compilationHash }) : compilation.getAssetPath(compilation.outputOptions.publicPath, { hash: compilationHash }); const isPublicPathDefined = webpackMajorVersion === 4 ? webpackPublicPath.trim() !== '' // Webpack 5 introduced "auto" - however it can not be retrieved at runtime : webpackPublicPath.trim() !== '' && webpackPublicPath !== 'auto'; let publicPath = // If the html-webpack-plugin options contain a custom public path uset it customPublicPath !== 'auto' ? customPublicPath : (isPublicPathDefined // If a hard coded public path exists use it ? webpackPublicPath // If no public path was set get a relative url path : path.relative(path.resolve(compilation.options.output.path, path.dirname(childCompilationOutputName)), compilation.options.output.path) .split(path.sep).join('/') ); if (publicPath.length && publicPath.substr(-1, 1) !== '/') { publicPath += '/'; } /** * @type {{ publicPath: string, js: Array, css: Array, manifest?: string, favicon?: string }} */ const assets = { // The public path publicPath: publicPath, // Will contain all js and mjs files js: [], // Will contain all css files css: [], // Will contain the html5 appcache manifest files if it exists manifest: Object.keys(compilation.assets).find(assetFile => path.extname(assetFile) === '.appcache'), // Favicon favicon: undefined }; // Append a hash for cache busting if (this.options.hash && assets.manifest) { assets.manifest = this.appendHash(assets.manifest, compilationHash); } // Extract paths to .js, .mjs and .css files from the current compilation const entryPointPublicPathMap = {}; const extensionRegexp = /\.(css|js|mjs)(\?|$)/; for (let i = 0; i < entryNames.length; i++) { const entryName = entryNames[i]; /** entryPointUnfilteredFiles - also includes hot module update files */ const entryPointUnfilteredFiles = compilation.entrypoints.get(entryName).getFiles(); const entryPointFiles = entryPointUnfilteredFiles.filter((chunkFile) => { // compilation.getAsset was introduced in webpack 4.4.0 // once the support pre webpack 4.4.0 is dropped please // remove the following guard: const asset = compilation.getAsset && compilation.getAsset(chunkFile); if (!asset) { return true; } // Prevent hot-module files from being included: const assetMetaInformation = asset.info || {}; return !(assetMetaInformation.hotModuleReplacement || assetMetaInformation.development); }); // Prepend the publicPath and append the hash depending on the // webpack.output.publicPath and hashOptions // E.g. bundle.js -> /bundle.js?hash const entryPointPublicPaths = entryPointFiles .map(chunkFile => { const entryPointPublicPath = publicPath + this.urlencodePath(chunkFile); return this.options.hash ? this.appendHash(entryPointPublicPath, compilationHash) : entryPointPublicPath; }); entryPointPublicPaths.forEach((entryPointPublicPath) => { const extMatch = extensionRegexp.exec(entryPointPublicPath); // Skip if the public path is not a .css, .mjs or .js file if (!extMatch) { return; } // Skip if this file is already known // (e.g. because of common chunk optimizations) if (entryPointPublicPathMap[entryPointPublicPath]) { return; } entryPointPublicPathMap[entryPointPublicPath] = true; // ext will contain .js or .css, because .mjs recognizes as .js const ext = extMatch[1] === 'mjs' ? 'js' : extMatch[1]; assets[ext].push(entryPointPublicPath); }); } return assets; } /** * Converts a favicon file from disk to a webpack resource * and returns the url to the resource * * @param {string|false} faviconFilePath * @param {WebpackCompilation} compilation * @param {string} publicPath * @returns {Promise} */ getFaviconPublicPath (faviconFilePath, compilation, publicPath) { if (!faviconFilePath) { return Promise.resolve(undefined); } return this.addFileToAssets(faviconFilePath, compilation) .then((faviconName) => { const faviconPath = publicPath + faviconName; if (this.options.hash) { return this.appendHash(faviconPath, compilation.hash); } return faviconPath; }); } /** * Generate meta tags * @returns {HtmlTagObject[]} */ getMetaTags () { const metaOptions = this.options.meta; if (metaOptions === false) { return []; } // Make tags self-closing in case of xhtml // Turn { "viewport" : "width=500, initial-scale=1" } into // [{ name:"viewport" content:"width=500, initial-scale=1" }] const metaTagAttributeObjects = Object.keys(metaOptions) .map((metaName) => { const metaTagContent = metaOptions[metaName]; return (typeof metaTagContent === 'string') ? { name: metaName, content: metaTagContent } : metaTagContent; }) .filter((attribute) => attribute !== false); // Turn [{ name:"viewport" content:"width=500, initial-scale=1" }] into // the html-webpack-plugin tag structure return metaTagAttributeObjects.map((metaTagAttributes) => { if (metaTagAttributes === false) { throw new Error('Invalid meta tag'); } return { tagName: 'meta', voidTag: true, attributes: metaTagAttributes }; }); } /** * Generate all tags script for the given file paths * @param {Array} jsAssets * @returns {Array} */ generatedScriptTags (jsAssets) { return jsAssets.map(scriptAsset => ({ tagName: 'script', voidTag: false, attributes: { defer: this.options.scriptLoading !== 'blocking', src: scriptAsset } })); } /** * Generate all style tags for the given file paths * @param {Array} cssAssets * @returns {Array} */ generateStyleTags (cssAssets) { return cssAssets.map(styleAsset => ({ tagName: 'link', voidTag: true, attributes: { href: styleAsset, rel: 'stylesheet' } })); } /** * Generate an optional base tag * @param { false | string | {[attributeName: string]: string} // attributes e.g. { href:"http://example.com/page.html" target:"_blank" } } baseOption * @returns {Array} */ generateBaseTag (baseOption) { if (baseOption === false) { return []; } else { return [{ tagName: 'base', voidTag: true, attributes: (typeof baseOption === 'string') ? { href: baseOption } : baseOption }]; } } /** * Generate all meta tags for the given meta configuration * @param {false | { [name: string]: false // disabled | string // name content pair e.g. {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}` | {[attributeName: string]: string|boolean} // custom properties e.g. { name:"viewport" content:"width=500, initial-scale=1" } }} metaOptions * @returns {Array} */ generatedMetaTags (metaOptions) { if (metaOptions === false) { return []; } // Make tags self-closing in case of xhtml // Turn { "viewport" : "width=500, initial-scale=1" } into // [{ name:"viewport" content:"width=500, initial-scale=1" }] const metaTagAttributeObjects = Object.keys(metaOptions) .map((metaName) => { const metaTagContent = metaOptions[metaName]; return (typeof metaTagContent === 'string') ? { name: metaName, content: metaTagContent } : metaTagContent; }) .filter((attribute) => attribute !== false); // Turn [{ name:"viewport" content:"width=500, initial-scale=1" }] into // the html-webpack-plugin tag structure return metaTagAttributeObjects.map((metaTagAttributes) => { if (metaTagAttributes === false) { throw new Error('Invalid meta tag'); } return { tagName: 'meta', voidTag: true, attributes: metaTagAttributes }; }); } /** * Generate a favicon tag for the given file path * @param {string| undefined} faviconPath * @returns {Array} */ generateFaviconTags (faviconPath) { if (!faviconPath) { return []; } return [{ tagName: 'link', voidTag: true, attributes: { rel: 'icon', href: faviconPath } }]; } /** * Group assets to head and bottom tags * * @param {{ scripts: Array; styles: Array; meta: Array; }} assetTags * @param {"body" | "head"} scriptTarget * @returns {{ headTags: Array; bodyTags: Array; }} */ generateAssetGroups (assetTags, scriptTarget) { /** @type {{ headTags: Array; bodyTags: Array; }} */ const result = { headTags: [ ...assetTags.meta, ...assetTags.styles ], bodyTags: [] }; // Add script tags to head or body depending on // the htmlPluginOptions if (scriptTarget === 'body') { result.bodyTags.push(...assetTags.scripts); } else { // If script loading is blocking add the scripts to the end of the head // If script loading is non-blocking add the scripts infront of the css files const insertPosition = this.options.scriptLoading === 'blocking' ? result.headTags.length : assetTags.meta.length; result.headTags.splice(insertPosition, 0, ...assetTags.scripts); } return result; } /** * Add toString methods for easier rendering * inside the template * * @param {Array} assetTagGroup * @returns {Array} */ prepareAssetTagGroupForRendering (assetTagGroup) { const xhtml = this.options.xhtml; return HtmlTagArray.from(assetTagGroup.map((assetTag) => { const copiedAssetTag = Object.assign({}, assetTag); copiedAssetTag.toString = function () { return htmlTagObjectToString(this, xhtml); }; return copiedAssetTag; })); } /** * Injects the assets into the given html string * * @param {string} html * The input html * @param {any} assets * @param {{ headTags: HtmlTagObject[], bodyTags: HtmlTagObject[] }} assetTags * The asset tags to inject * * @returns {string} */ injectAssetsIntoHtml (html, assets, assetTags) { const htmlRegExp = /(]*>)/i; const headRegExp = /(<\/head\s*>)/i; const bodyRegExp = /(<\/body\s*>)/i; const body = assetTags.bodyTags.map((assetTagObject) => htmlTagObjectToString(assetTagObject, this.options.xhtml)); const head = assetTags.headTags.map((assetTagObject) => htmlTagObjectToString(assetTagObject, this.options.xhtml)); if (body.length) { if (bodyRegExp.test(html)) { // Append assets to body element html = html.replace(bodyRegExp, match => body.join('') + match); } else { // Append scripts to the end of the file if no element exists: html += body.join(''); } } if (head.length) { // Create a head tag if none exists if (!headRegExp.test(html)) { if (!htmlRegExp.test(html)) { html = '' + html; } else { html = html.replace(htmlRegExp, match => match + ''); } } // Append assets to head element html = html.replace(headRegExp, match => head.join('') + match); } // Inject manifest into the opening html tag if (assets.manifest) { html = html.replace(/(]*)(>)/i, (match, start, end) => { // Append the manifest only if no manifest was specified if (/\smanifest\s*=/.test(match)) { return match; } return start + ' manifest="' + assets.manifest + '"' + end; }); } return html; } /** * Appends a cache busting hash to the query string of the url * E.g. http://localhost:8080/ -> http://localhost:8080/?50c9096ba6183fd728eeb065a26ec175 * @param {string} url * @param {string} hash */ appendHash (url, hash) { if (!url) { return url; } return url + (url.indexOf('?') === -1 ? '?' : '&') + hash; } /** * Encode each path component using `encodeURIComponent` as files can contain characters * which needs special encoding in URLs like `+ `. * * Valid filesystem characters which need to be encoded for urls: * * # pound, % percent, & ampersand, { left curly bracket, } right curly bracket, * \ back slash, < left angle bracket, > right angle bracket, * asterisk, ? question mark, * blank spaces, $ dollar sign, ! exclamation point, ' single quotes, " double quotes, * : colon, @ at sign, + plus sign, ` backtick, | pipe, = equal sign * * However the query string must not be encoded: * * fo:demonstration-path/very fancy+name.js?path=/home?value=abc&value=def#zzz * ^ ^ ^ ^ ^ ^ ^ ^^ ^ ^ ^ ^ ^ * | | | | | | | || | | | | | * encoded | | encoded | | || | | | | | * ignored ignored ignored ignored ignored * * @param {string} filePath */ urlencodePath (filePath) { // People use the filepath in quite unexpected ways. // Try to extract the first querystring of the url: // // some+path/demo.html?value=abc?def // const queryStringStart = filePath.indexOf('?'); const urlPath = queryStringStart === -1 ? filePath : filePath.substr(0, queryStringStart); const queryString = filePath.substr(urlPath.length); // Encode all parts except '/' which are not part of the querystring: const encodedUrlPath = urlPath.split('/').map(encodeURIComponent).join('/'); return encodedUrlPath + queryString; } /** * Helper to return the absolute template path with a fallback loader * @param {string} template * The path to the template e.g. './index.html' * @param {string} context * The webpack base resolution path for relative paths e.g. process.cwd() */ getFullTemplatePath (template, context) { if (template === 'auto') { template = path.resolve(context, 'src/index.ejs'); if (!fs.existsSync(template)) { template = path.join(__dirname, 'default_index.ejs'); } } // If the template doesn't use a loader use the lodash template loader if (template.indexOf('!') === -1) { template = require.resolve('./lib/loader.js') + '!' + path.resolve(context, template); } // Resolve template path return template.replace( /([!])([^/\\][^!?]+|[^/\\!?])($|\?[^!?\n]+$)/, (match, prefix, filepath, postfix) => prefix + path.resolve(filepath) + postfix); } /** * Minify the given string using html-minifier-terser * * As this is a breaking change to html-webpack-plugin 3.x * provide an extended error message to explain how to get back * to the old behaviour * * @param {string} html */ minifyHtml (html) { if (typeof this.options.minify !== 'object') { return html; } try { return require('html-minifier-terser').minify(html, this.options.minify); } catch (e) { const isParseError = String(e.message).indexOf('Parse Error') === 0; if (isParseError) { e.message = 'html-webpack-plugin could not minify the generated output.\n' + 'In production mode the html minifcation is enabled by default.\n' + 'If you are not generating a valid html output please disable it manually.\n' + 'You can do so by adding the following setting to your HtmlWebpackPlugin config:\n|\n|' + ' minify: false\n|\n' + 'See https://github.com/jantimon/html-webpack-plugin#options for details.\n\n' + 'For parser dedicated bugs please create an issue here:\n' + 'https://danielruf.github.io/html-minifier-terser/' + '\n' + e.message; } throw e; } } /** * Helper to return a sorted unique array of all asset files out of the * asset object */ getAssetFiles (assets) { const files = _.uniq(Object.keys(assets).filter(assetType => assetType !== 'chunks' && assets[assetType]).reduce((files, assetType) => files.concat(assets[assetType]), [])); files.sort(); return files; } } /** * The default for options.templateParameter * Generate the template parameters * * Generate the template parameters for the template function * @param {WebpackCompilation} compilation * @param {{ publicPath: string, js: Array, css: Array, manifest?: string, favicon?: string }} assets * @param {{ headTags: HtmlTagObject[], bodyTags: HtmlTagObject[] }} assetTags * @param {ProcessedHtmlWebpackOptions} options * @returns {TemplateParameter} */ function templateParametersGenerator (compilation, assets, assetTags, options) { return { compilation: compilation, webpackConfig: compilation.options, htmlWebpackPlugin: { tags: assetTags, files: assets, options: options } }; } // Statics: /** * The major version number of this plugin */ HtmlWebpackPlugin.version = 4; /** * A static helper to get the hooks for this plugin * * Usage: HtmlWebpackPlugin.getHooks(compilation).HOOK_NAME.tapAsync('YourPluginName', () => { ... }); */ HtmlWebpackPlugin.getHooks = getHtmlWebpackPluginHooks; HtmlWebpackPlugin.createHtmlTagObject = createHtmlTagObject; module.exports = HtmlWebpackPlugin;