diff --git a/README.md b/README.md index 6a644256..d5877a03 100644 --- a/README.md +++ b/README.md @@ -147,6 +147,7 @@ Allowed values are as follows |**`inject`**|`{Boolean\|String}`|`true`|`true \|\| 'head' \|\| 'body' \|\| false` Inject all assets into the given `template` or `templateContent`. When passing `true` or `'body'` all javascript resources will be placed at the bottom of the body element. `'head'` will place the scripts in the head element| |**`favicon`**|`{String}`|``|Adds the given favicon path to the output HTML| |**`meta`**|`{Object}`|`{}`|Allows to inject `meta`-tags. E.g. `meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}`| +|**`base`**|`{Object\|String\|false}`|`false`|Inject a [`base`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) tag. E.g. `base: "https://example.com/path/page.html`| |**`minify`**|`{Boolean\|Object}`|`true` if `mode` is `'production'`, otherwise `false`|Controls if and in what ways the output should be minified. See [minification](#minification) below for more details.| |**`hash`**|`{Boolean}`|`false`|If `true` then append a unique `webpack` compilation hash to all included scripts and CSS files. This is useful for cache busting| |**`cache`**|`{Boolean}`|`true`|Emit the file only if it was changed| @@ -387,6 +388,39 @@ plugins: [ ] ``` +### Base Tag + +When the `base` option is used, +html-webpack-plugin will inject a [base tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base). +By default, a base tag will not be injected. + +The following two are identical and will both insert ``: + +```js +new HtmlWebpackPlugin({ + 'base': 'http://example.com/some/page.html' +}) +``` + +```js +new HtmlWebpackPlugin({ + 'base': { 'href': 'http://example.com/some/page.html' } +}) +``` + +The `target` can be specified with the corresponding key: + +```js +new HtmlWebpackPlugin({ + 'base': { + 'href': 'http://example.com/some/page.html', + 'target': '_blank' + } +}) +``` + +which will inject the element ``. + ### Long Term Caching For long term caching add `contenthash/templatehash` to the filename. diff --git a/index.js b/index.js index 75bca5d3..4bf1cf25 100644 --- a/index.js +++ b/index.js @@ -53,6 +53,7 @@ class HtmlWebpackPlugin { excludeChunks: [], chunksSortMode: 'auto', meta: {}, + base: false, title: 'Webpack App', xhtml: false }; @@ -223,6 +224,7 @@ class HtmlWebpackPlugin { 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) ] @@ -713,6 +715,28 @@ class HtmlWebpackPlugin { })); } + /** + * 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 | { diff --git a/spec/basic.spec.js b/spec/basic.spec.js index 8e8bcd49..2734515d 100644 --- a/spec/basic.spec.js +++ b/spec/basic.spec.js @@ -1588,6 +1588,41 @@ describe('HtmlWebpackPlugin', () => { }, [//], null, done); }); + it('adds a base tag with attributes', done => { + testHtmlPlugin({ + mode: 'production', + entry: path.join(__dirname, 'fixtures/index.js'), + output: { + path: OUTPUT_DIR, + filename: 'index_bundle.js' + }, + plugins: [ + new HtmlWebpackPlugin({ + base: { + href: 'http://example.com/page.html', + target: '_blank' + } + }) + ] + }, [//], null, done); + }); + + it('adds a base tag short syntax', done => { + testHtmlPlugin({ + mode: 'production', + entry: path.join(__dirname, 'fixtures/index.js'), + output: { + path: OUTPUT_DIR, + filename: 'index_bundle.js' + }, + plugins: [ + new HtmlWebpackPlugin({ + base: 'http://example.com/page.html' + }) + ] + }, [//], null, done); + }); + it('adds a meta tag', done => { testHtmlPlugin({ mode: 'production',