feat: Add support for <base> tag (#1160)

Author: atstp

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 `<base href="http://example.com/some/page.html">`:
+
+```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 `<base href="http://example.com/some/page.html" target="_blank">`.
+
 ### Long Term Caching
 
 For long term caching add `contenthash/templatehash` to the filename.

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<HtmlTagObject>}
+  */
+  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 | {

spec/basic.spec.js

@@ -1588,6 +1588,41 @@ describe('HtmlWebpackPlugin', () => {
     }, [/<link rel="shortcut icon" href="[^"]+\.ico">/], 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'
+          }
+        })
+      ]
+    }, [/<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'
+        })
+      ]
+    }, [/<base href="http:\/\/example\.com\/page\.html">/], null, done);
+  });
+
   it('adds a meta tag', done => {
     testHtmlPlugin({
       mode: 'production',