Package Exports

html-webpack-inject-string-plugin
html-webpack-inject-string-plugin/_src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (html-webpack-inject-string-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

HTML WEBPACK INJECT STRING PLUGIN

What's this?

A dead simple plugin that searches each file output by html-webpack-plugin for a custom string(like a '</body>' tag) and prepends, replaces, or appends a custom string by injecting it, then returning the completed template.

Install

npm i -D html-webpack-inject-string-plugin html-webpack-plugin

Config default options

{
    // String to search for
    search: "",
    // String to inject
    inject: "",
    
    // (optional)Injects before found string
    prepend: true
    // (optional)Replaces found string with injection
    replace: false
    // (optional)Injects after found string
    append: false
    
    // (optional)Adds 'r\n\' before or after injection string
    newline: { before: true, after: true }
    // (optional)Enables console.log messages
    dev: false
}

Usage (simple)

const htmlWebpackInjectStringPlugin = require('html-webpack-inject-string-plugin');
{   // ...webpack.config
    plugins: [
        // ...htmlWebpackPlugin({}),
         
        new htmlWebpackInjectStringPlugin({
            // String to search for
            search: "</body>",
            // String to inject
            inject: "<script>alert('injected')</script>"
            // Defaults to prepending injection before search string
        }),
    ]
}

Usage (complex)

const htmlWebpackInjectStringPlugin = require('html-webpack-inject-string-plugin');
{   // ...webpack.config
    plugins: [
        // ...htmlWebpackPlugin({}),
        
        new htmlWebpackInjectStringPlugin({
            // String to search for
            search: "<div id='replace-me'></div>",
            // String to inject
            inject: "<script>alert('injected')</script>",
            
            // NOTE: All three of these can be used at the same time
            // which will inject the same string 3 times in a row
            prepend: true,
            replace: true,
            append: true,
            
            // Removes '\r\n' before and after the injection
            newline: false
            
            // Turns on console log messages if you want to see what it's doing
            dev: true
        }),
    ]
}

Be aware

Backslashes may need to be escaped twice(three slashes total), because it's run through a compiler first.

Wait, isn't this a little dangerous?

Yep!

So why would I use it?

Because sometimes it's just incredibly helpful.

For instance I needed to inject a browser-sync script into each html-webpack file that contained a closing body tag. I didn't want the boilerplate of adding it individually and conditionally(just in dev mode) to each page.

So I made this plugin to add it automatically and only where and when it was needed.