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

1
2{
3    // String to search for
4    search: "",
5    // String to inject
6    inject: "",
7    
8    // (optional)Injects before found string
9    prepend: true
10    // (optional)Replaces found string with injection
11    replace: false
12    // (optional)Injects after found string
13    append: false
14    
15    // (optional)Adds 'r\n\' before or after injection string
16    newline: { before: true, after: true }
17    // (optional)Enables console.log messages
18    dev: false
19}

Usage (simple)

1const htmlWebpackInjectStringPlugin = require('html-webpack-inject-string-plugin');
2{   // ...webpack.config
3    plugins: [
4        // ...htmlWebpackPlugin({}),
5         
6        new htmlWebpackInjectStringPlugin({
7            // String to search for
8            search: "</body>",
9            // String to inject
10            inject: "<script>alert('injected')</script>"
11            // Defaults to prepending injection before search string
12        }),
13    ]
14}

Usage (complex)

1const htmlWebpackInjectStringPlugin = require('html-webpack-inject-string-plugin');
2{   // ...webpack.config
3    plugins: [
4        // ...htmlWebpackPlugin({}),
5        
6        new htmlWebpackInjectStringPlugin({
7            // String to search for
8            search: "<div id='replace-me'></div>",
9            // String to inject
10            inject: "<script>alert('injected')</script>",
11            
12            // NOTE: All three of these can be used at the same time
13            // which will inject the same string 3 times in a row
14            prepend: true,
15            replace: true,
16            append: true,
17            
18            // Removes '\r\n' before and after the injection
19            newline: false
20            
21            // Turns on console log messages if you want to see what it's doing
22            dev: true
23        }),
24    ]
25}

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.