How to use the fuse-box.WebIndexPlugin function in fuse-box

// start the hot reload server
  if (!isProduction) {
    fuse.dev({
      fallback: '../src/index.html',
      port: DEV_PORT
    });
  }

  // bundle the electron renderer code
  const browser = fuse
    .bundle('browser')
    .target('browser@esnext')
    .instructions('> example/todo/src/index.tsx')
    .plugin(JSONPlugin())
    .plugin(WebIndexPlugin({ template: './src/index.html' }))
    .plugin(CSSPlugin({ inject: true }))
    .plugin(
      ReplacePlugin({
        'process.env.NODE_ENV': `${process.env.NODE_ENV}`
      })
    );

  const server = fuse
    .bundle('server')
    .target('server@esnext')
    .instructions('> example/todo/server/index.ts -better-sqlite3');

  if (!isProduction) {
    server.watch(
      p =>
        p.indexOf(`/debe/src/`) !== -1 ||

cache: !isProduction,
      output: path.join(
        targetDir,
        componentdocs ? paths.Bundle : '',
        '$name.js'
      ),
      target: isProduction ? 'browser@es5' : 'browser@es2015',
      plugins: [
        EnvPlugin(env),
        SVGPlugin(),
        /* [LESSPlugin(), CSSPlugin()],  Add LESS, SASS, etc here if needed */
        CSSPlugin(),
        JSONPlugin(),
        !component &&
          !componentdocs &&
          WebIndexPlugin({
            template: path.join(srcDir, 'index.html'),
            path: './',
          }),
        isProduction &&
          !component &&
          !componentdocs &&
          QuantumPlugin({ removeExportsInterop: false, uglify: true }),
      ],
    });
    if (componentdocs) {
      vendor = fuse
        .bundle('manager')
        .instructions('> __stories__/.storybook/index.js');
      app = fuse.bundle('preview').instructions('> __stories__/index.ts');
    } else if (component) {
      app = fuse.bundle('components').instructions('!> [index.tsx]');

getConfig() {
        return FuseBox.init({
            homeDir: "src",
            output: "dist/$name.js",
            target : "browser@es5",
            hash: this.isProduction,
            useTypescriptCompiler : true,
            plugins: [
                CSSPlugin(),
                SVGPlugin(),
                WebIndexPlugin({
                    template : "src/index.html"
                }),
                this.isProduction && QuantumPlugin({
                    bakeApiIntoBundle: "app",
                    uglify: true,
                    css : true
                })
            ]
        })
    }
    createBundle(fuse) {

const fuse = FuseBox.init({
  homeDir: source,
  target: 'browser@es5',
  output: `${target}/$name.js`,
  sourceMaps: !isProduction,
  plugins: [
    CSSPlugin({
      group: 'style.css',
      outFile: `${target}/style.css`,
      minify: isProduction,
    }),
    CopyAllPlugin({
      useDefault: true,
      files: ['*.png', '*.jpg', '*.ttf', '*.mp3', '*.ogg'],
    }),
    !isProduction && WebIndexPlugin({
      template: `${source}/index.html`,
    }),
    isProduction &&
      QuantumPlugin({
        css: true,
        uglify: true,
        treeshake: true,
        bakeApiIntoBundle: name,
      }),
  ],
});

if (!isProduction) {
  fuse.dev();
}

getConfig() {
			return FuseBox.init({
				homeDir: "src",
				target: "browser@es5",
				output: "dist/$name.js",
				plugins: [
					[SassPlugin(), CSSPlugin()],
					WebIndexPlugin({
						template: "src/index.html",
						path: "/static"
						//resolve  : "/static"
					})
				]
			});
		}
		async tsc() {

getConfig() {
    return FuseBox.init({
      homeDir: 'src',
      output: 'dist/$name.js',
      target : 'browser@es5',
      sourceMaps: !this.isProduction,
      globals: !this.isProduction ? { p5: 'p5' } : {},
      plugins: [
        WebIndexPlugin(),
        CopyPlugin({
          files: ['.mp3', '.wav', '.vlw', '.ttf']
        }),
        this.isProduction && QuantumPlugin({
          uglify: false,
          ensureES5: true,
          treeshake : true,
          bakeApiIntoBundle: "app"
        })
      ]
    })
  }

const getWebIndexPlugin = name => {
  return WebIndexPlugin({
    template: `static/pages/${name}.html`,
    path: production ? '.' : '/',
    target: `${name}.html`,
    bundles: [name],
  });
};

globals: (buildType === BUILD.TEST) ? undefined : { "sodiumjs": "Sodium" },

    sourceMaps: (buildType === BUILD.PRODUCTION) ? undefined : sourceMapStyle,
    plugins: [
        buildType === BUILD.PRODUCTION
        && QuantumPlugin({
          removeUseStrict: false,
          containedAPI: true,
          bakeApiIntoBundle: bundleName,
          treeshake: true,
          uglify: true,
          target: "npm"
        }),

        buildType === BUILD.DEV
        && WebIndexPlugin({
            title: devPageTitle,
            template: staticRoot + "/index.html",
            path: "."
        })
    ]
});

//create bundle
const bundle = fuse.bundle(bundleName);

if (buildType !== BUILD.TEST) {
    switch(buildType) {
        case BUILD.DEV:
            bundle.instructions(`>dev/DevInit.ts`);
            break;
        default:

const getWebIndexPlugin = name => {
  return WebIndexPlugin({
    template: `static/pages/${name}.html`,
    path: production ? '.' : '/',
    target: `${name}.html`,
    bundles: [name],
  });
};

export const fuseAngular = (opts: Options) => {
  const shared = {
    sourceMaps: opts.optimizations.enabled,
    homeDir: opts.srcRoot,
    log: opts.log,
    output: `${opts.outputDirectory}/$name.js`,
    cache: false, //TODO: fix this !opts.optimizations.enabled,
  }

  const webIndexPlugin = WebIndexPlugin({
    engine: 'pug',
    path: `${opts.jsOutputDir}`,
    template: `${opts.srcRoot}/${opts.browser.rootDir}/${opts.browser.indexTemplatePath}`,
    target: '../index.html',
    scriptAttributes: 'defer',
    locals: {
      csp: opts.enableAotCompilaton
        ? `script-src 'self'; object-src 'self'`
        : `script-src 'self' 'unsafe-eval'; object-src 'self'`
    }
  })

  const replacePlugin = ReplacePlugin({ "__APPVERSION__": pkg.version })

  const httpServer = opts.serve && !opts.universal.enabled
  const UNIVERSAL_PORT = 4200