inject-inner-webpack-plugin

The installation

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

The sample

webpack.config.js
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),
    ],
};
Copy the code
index.html
<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
    <! -- This script tag will be replaced by internal source code in the output HTML -->
    <script src="./inner.js? __inline"></script>
  </head>
  <body>
  </body>
</html>
Copy the code

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

<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
    <script>
        // inner. Js bundle contents
    </script>
  </head>
  <body>
      <script src="index.js"></script>
  </body>
</html>
Copy the code

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

options

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

new InjectInnerWebpackPlugin(HtmlWebpackPlugin, {
    context: path.resolve(__dirname, '.. ')});Copy the code

The second parameter is allowed as follows:

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