1.0.0 • Published 5 years ago

html-webpack-cheeky-insert-plugin v1.0.0

Weekly downloads
1
License
MIT
Repository
github
Last release
5 years ago

html-webpack-cheeky-insert-plugin

Adds ability to insert HTML into files generated with the HTML Webpack Plugin

Install

$ npm install --save-dev html-webpack-cheeky-insert-plugin
$ yarn add --dev html-webpack-cheeky-insert-plugin

Usage

webkit.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackInsertPlugin = require("html-webpack-cheeky-insert-plugin");

module.exports = {
	entry: "index.js",
	output: {
		path: __dirname + "/dist",
		filename: "bundle.js"
	},
	plugins: [
		new HtmlWebpackPlugin(),
		new HtmlWebpackInsertPlugin({
			//whether the html should be inserted at the top of the document
			top: false,

			//tag to insert html into
			tag: "body",

			//html to be inserted, or an array of html strings
			html: ""
		})
	]
}

Example

webkit.config.js

...
	plugins: [
		new HtmlWebpackPlugin({
			title: "Test"
		}),
		new HtmlWebpackInsertPlugin({
			html: "<p>Hello World</p>"
		})
	]
...

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Test</title>
	</head>
	<body>
		<p>Hello World</p>
		<script type="text/javascript" src="bundle.js"></script>
	</body>
</html>

Example with array

webkit.config.js

...
	plugins: [
		new HtmlWebpackPlugin(),
		new HtmlWebpackInsertPlugin({
			tag: "head",
			html: [
				"<meta name='description' content='Cheeky cheeky!'>",
				"<meta name='keywords' content='A,B,C'>",
				"<meta name='author' content='Morgan Barrett'>",
				"<meta name='viewport' content='width=device-width, initial-scale=1.0'>"
			]
		})
	]
...

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name='description' content='Cheeky cheeky!'>
		<meta name='keywords' content='A,B,C'>
		<meta name='author' content='Morgan Barrett'>
		<meta name='viewport' content='width=device-width, initial-scale=1.0'>
	</head>
	<body>
		<script type="text/javascript" src="bundle.js"></script>
	</body>
</html>

Example with top

webkit.config.js

...
	plugins: [
		new HtmlWebpackPlugin(
			filename: "cheekyServer.php"
		),
		new HtmlWebpackInsertPlugin({
			top: true,
			html: [
				"<?php",
					"if(rand(0, 5) == 2){",
						"echo '<h1>Random 404</h1>';",
						"exit;",
					"}",
				"?>"
			]
		})
	]
...

cheekyServer.php

<?php
	if(rand(0, 5) == 2){
		echo '<h1>Random 404</h1>';
		exit;
	}
?>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<script type="text/javascript" src="bundle.js"></script>
	</body>
</html>