html-webpack-mountpoint-plugin
v0.0.14
Published
A simple plugin that adds SPA mountpoints to the default template. Intended for use with the html-webpack-plugin.
Downloads
4
Maintainers
codewezlReadme
html-webpack-mountpoint-plugin
This is a naive utility that adds application mount points to the default html template provided by html-webpack-plugin (use with webpack4)
Basic Usage
to install:
npm i html-webpack-mountpoint-plugin --save-dev
oryarn add html-webpack-mountpoint-plugin -D
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackMountpointPlugin = require('html-webpack-mountpoint-plugin');
...
{
plugins: [
new HtmlWebpackPlugin({
title: 'WebpackMountpointTest',
<options>
}),
new HtmlWebpackMountpointPlugin({
tagName: 'section',
mountPoints: ['app-hook', 'dialogs-hook']
}) ...
or
new HtmlWebpackMountpointPlugin([
{
tagName: 'section',
id: 'app-hook',
attributes: {
className: 'spa mount'
}
},
{
tagName: 'div',
id: 'dialogs-hook',
attributes: {
className: 'too-cool'
}
},
])
], ...
}produces: index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebpackMountpointTest</title>
</head>
<body>
<section id="app-hook"></section>
<section id="dialogs-hook"></section>
<script type="text/javascript" src="src.bundle.js"></script>
</body>
<!-- or -->
<body>
<section id="app-hook" class="spa mount"></section>
<div id="dialogs-hook" class="too-cool"></div>
<script type="text/javascript" src="src.bundle.js"></script>
</body>
</html>Please post any issues or feature requests to https://github.com/AdamAtri/html-webpack-mountpoint-plugin/issues