html-webpack-element-plugin
v1.0.2
Published
HTML Webpack plugin that adds a tag to the html generated by HTML Webpack Plugin
Downloads
48
Readme
HTML Webpack Element 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-element-plugin --save-devBasic 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 HtmlWebpackElementPlugin = require('html-webpack-element-plugin');
const webpackConfig = {
entry: 'index.js',
output: {
path: 'dist',
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackRootPlugin()
],
};The above should add this to your dist directory.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>So you can do this without adding a template!:
import React from 'react';
import { render } from 'react-dom';
const Hello = () => (
<h1>Hello!</h1>
);
render(
<Hello />,
document.getElementById('app')
);Syntax
new HtmlWebpackElementPlugin()Creates a <div> with an id of "app."
new HtmlWebpackElementPlugin(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'app'.
new HtmlWebpackElementPlugin(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: 'dist',
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackElementPlugin('root')
]
};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 HtmlWebpackElementPlugin({ tagName: 'main', tagId: 'application-root' })
]
};Notes
Plugin originally based on html-webpack-root-plugin by @octalmage and updated for HTML Webpack Plugin 4.