html-webpack-root-plugin

0.10.0 • Public • Published

HTML Webpack Root Plugin

This is a plugin that extends the functionality of the HTML Webpack Plugin by adding an element to the generated HTML file that React (or other frameworks) can use to render the app.

Installation

Install the plugin with npm:

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

Basic Use

This adds an element (a div with "root" as the id by default) to the HTML file generated by the HTML Webpack Plugin:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackRootPlugin = require('html-webpack-root-plugin');
const webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'build',
    filename: 'bundle.js'
  },
  plugins: [new HtmlWebpackPlugin(), new HtmlWebpackRootPlugin()]
};

Should add this to your build directory.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script> 
  </body>
</html>

So you can do this:

import React from 'react';
import { render } from 'react-dom';
 
const Hello = () => (
  <h1>Hello!</h1>
);
 
render(
  <Hello />,
  document.getElementById('root')
);

Without adding a template!

Syntax

new HtmlWebpackRootPlugin()

Creates a <div> with an id of "root."

new HtmlWebpackRootPlugin(object)

Takes a configuration object with the following values:

  • tagName: the type of element created. Defaults to 'div'.
  • tagId: the ID given to the created tag. Defaults to 'root'.
new HtmlWebpackRootPlugin(string)

If a string is passed it creates a <div> with the passed string as the ID.

If anything other than a string or an object is passed it will use the default values and issue a warning in the Webpack build report.

Examples

This adds an element (a div with "root" as the id by default) to the HTML file generated by the HTML Webpack Plugin:

Add <div id="app"></div> to the created file.

const webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'build',
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackRootPlugin('app')
  ]
};

Add <main id="application-root"></main> to the created file.

const webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'build',
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackRootPlugin({ tagName: 'main', tagId: 'application-root' })
  ]
};

Notes

Plugin based on html-webpack-react-root-plugin by @aaronjkrause and updated for Webpack 4.

Readme

Keywords

none

Package Sidebar

Install

npm i html-webpack-root-plugin

Weekly Downloads

64

Version

0.10.0

License

MIT

Unpacked Size

5.18 kB

Total Files

6

Last publish

Collaborators

  • octalmage