❤
npm
Sign UpSign In

html-webpack-cheeky-insert-plugin

1.0.0 • Public • Published

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>

Readme

Keywords

Package Sidebar

Install

npm i html-webpack-cheeky-insert-plugin

Repository

github.com/morganbarrett/html-webpack-cheeky-insert-plugin

Homepage

github.com/morganbarrett/html-webpack-cheeky-insert-plugin

Weekly Downloads

7

Version

1.0.0

License

MIT

Unpacked Size

5.53 kB

Total Files

4

Last publish

Collaborators

  • morganbarrett
Try on RunKit
Report malware