will inject internal scripting into the HTML page package plug-in output HTML files of the page package plug-in

The installation


npm install –save-dev inject-inner-webpack-plugin

The sample


const HtmlWebpackPlugin = require('html-webpack-plugin');
const InjectInnerWebpackPlugin = require('inject-inner-webpack-plugin');

module.exports = {
    entry: {
        index: './index.js',
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html',
        new InjectInnerWebpackPlugin(HtmlWebpackPlugin),
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webpack App</title> <! > <script SRC ="./inner.js? __inline"></script> </head> <body> </body> </html>

This will generate a file dist/index.html containing the following

<! DOCTYPE HTML > < HTML > <head> <meta charset="utf-8"> <title>Webpack App</title> <script> // inner.js </script> </head>  <body> <script src="index.js"></script> </body> </html>

The entry in webpack.config.js should be Object. Only instances of the HtmlWebpackPlugin with template options are processed.


HtmlWebpackPlugin must be passed to the first parameter. The second parameter is optional, for example:

const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); new InjectInnerWebpackPlugin(HtmlWebpackPlugin, { context: path.resolve(__dirname, '.. ')});

The allowable values for the second parameter are as follows:

The name of the type The default value instructions
context {String} : String Webpack Context If you use SRC /inner.js? __inline, the path is relative to the context
isRemainBundle {Boolean} : Boolean value false If true, the inner block to be printed is reserved.
scriptTag {Function} : Function ` ` Customize internal content output
template {String&Array}: String&Array ` ` Specifies the template to inject