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',