自定义 webpack-plugin-forceinsertscripttag 在 html 插入自定义的 script

背景：我们在业务开发中有时候需要在模板html文件，也就是index.html插入一段script,通常都是直接通过script标签直接插入，但是控制顺序就不太好控制了。此插件完成工作大概在一年半前，因为离职换工作，现在开源出来。有好的坑，内推我😊

使用案列: 我在这篇文章中使用此插件，在 index.html 中插入唤起 vscode 的script, 使用场景主要适用于在 渲染的html中插入 js

webpack-plugin-forceinsertscripttag 此插件基于 html-webpack-plugin 实现的，在业务中使用的话，需要确认业务有没有使用 html-webpack-plugin。
如果业务中没有使用html-webpack-plugin，那么可以使用 webpack-plugin-addscriptforhtmlplugin, 此插件功能和 webpack-plugin-forceinsertscripttag 功能一致。
通过自定义的 plugin，借助 html-webpack-plugin 在 afterTemplateExecution 钩子阶段强制插入一段 script, 可以插入在 <head> 标签，也可以插入在 <body> 标签.
如何使用

const Forceinsertscripttag = require('webpack-plugin-forceinsertscripttag');

module.exports = {
    ...
    plugins: [
        ...
        new Forceinsertscripttag({
            isShift: true, // default: true 前置插入 还是 后置插入
            isInsertBody: true, //default: true  插入的 head 里面 还是 body 里面 (html-webpack-plugin 的 inject: false，只会插入在body 里面)
            url: 'xxx.js', // 被加载的 js 地址
            jsDeferLoad: false, // default: false  插入的 js 需不需要 在<script> 设置 defer 属性
            jsAsyncLoad: false, // default: false  插入的 js 需不需要 在<script> 设置 async 属性
            innerHTML: 'xx',
        }),
    ]
}

参数含义:

html-webpack-plugin 的 inject: true，直接根据参数 isInsertBody 决定插入到 head 还是 body 里面
在 head | body 里面根据参数 isShift 决定是前置插入还是后置插入
html-webpack-plugin 的 inject: false，只会插入在body 里面，但是可以根据参数 isShift 决定是在body进行前置插入还是后置插入
可以通过设置 jsDeferLoad | jsAsyncLoad 来决定
url 和 innerHTML 不可以同时设置，也不可以同时不设置 (两者总要设置一个)

借助此插件: 可以在编译阶段强制插入一段 script 到我们的 html