Html-webpack-root-element-plugin NPM

html-webpack-root-element-plugin

Dev Dependencies Optional Dependencies

Plugin for html-webpack-plugin to output top level root html element.

This is especially usuful for front end frameworks such as React or Angular when you want to mount and render your application to top level element and not directly into <body/>.

Installation

html-wepack-root-element-plugin is easiest to use when installed with npm:

npm install --save-dev html-webpack-root-element-plugin

or with yarn:

yarn add -D html-webpack-root-element-plugin

Usage

Just import the module into your webpack config and place if after html-webpack-plugin:

const HtmlWebpackRootElementPlugin = require("html-webpack-root-element-plugin");

module.exports = {
  // ...
  plugins: [
    // ...
    new HtmlWebpackPlugin(),
    new HtmlWebpackRootElementPlugin(),
    // ...
  ]
};

By default plugin will produce following root element as the first child element under <body/>:

<div id="root"></div>

Customize

There are few options to customize the plugin bahavior. You can configure the html tag to be used to create root element and id attribute on the tag. Tweak up plugin output by passingrootElement parameter to your html-webpack-plugin constructor options object. By default this equals true.

Possible values:

boolean - If false then root element will not be rendered.
string - Passing string value will override default id attribute on rendered element.
object - Object can have two optional properties tagName to define tag to use and idAttribute to set id attribute for element.

Example with string value:

const HtmlWebpackRootElementPlugin = require("html-webpack-root-element-plugin");

module.exports = {
  // ...
  plugins: [
    // ...
    new HtmlWebpackPlugin({
      rootElement: "my-id"
    }),
    new HtmlWebpackRootElementPlugin(),
    // ...
  ]
};

will output:

<div id="my-id"></div>

Example with object value:

const HtmlWebpackRootElementPlugin = require("html-webpack-root-element-plugin");

module.exports = {
  // ...
  plugins: [
    // ...
    new HtmlWebpackPlugin({
      rootElement: {
        tagName: "main",
        idAttribute: "my-id"
      }
    }),
    new HtmlWebpackRootElementPlugin(),
    // ...
  ]
};

will output: