Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/octalmage/html-webpack-root-plugin
HTML Webpack plugin that adds a tag to the generated HTML for a mount point.
https://github.com/octalmage/html-webpack-root-plugin
Last synced: 20 days ago
JSON representation
HTML Webpack plugin that adds a tag to the generated HTML for a mount point.
- Host: GitHub
- URL: https://github.com/octalmage/html-webpack-root-plugin
- Owner: octalmage
- License: mit
- Created: 2018-05-08T22:49:40.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-05-22T23:48:07.000Z (over 5 years ago)
- Last Synced: 2024-10-16T01:11:58.680Z (about 1 month ago)
- Language: JavaScript
- Size: 17.6 KB
- Stars: 3
- Watchers: 1
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# HTML Webpack Root Plugin
This is a plugin that extends the functionality of the [HTML Webpack Plugin](https://github.com/jantimon/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:
```shell
$ 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:
```javascript
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.
```html
Webpack App
```
So you can do this:
```javascript
import React from 'react';
import { render } from 'react-dom';
const Hello = () => (
Hello!
);
render(
,
document.getElementById('root')
);
```
Without adding a template!
## Syntax
```javascript
new HtmlWebpackRootPlugin()
```
Creates a `
` with an id of "root."
```javascript
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'`.
```javascript
new HtmlWebpackRootPlugin(string)
```
If a string is passed it creates a `
` 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 `
` to the created file.
```javascript
const webpackConfig = {
entry: 'index.js',
output: {
path: 'build',
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackRootPlugin('app')
]
};
```
Add `` to the created file.
```javascript
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](https://www.npmjs.com/package/html-webpack-react-root-plugin) by @aaronjkrause and updated for Webpack 4.