How to use the html-webpack-plugin function in html-webpack-plugin

}
    })
  );
} else if (__PROD__) {
  debug('Enable plugins for production (OccurenceOrder, Dedupe & UglifyJS).');
  webpackConfig.plugins.push(
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        unused: true,
        dead_code: true,
        warnings: false
      }
    }),
    new HtmlWebpackPlugin({
      template: paths.client('index.electron.ejs'),
      title: 'sup fam',
      filename: 'index.html',
      inject: false,
      cache: true,
      showErrors: true,
    })
  );
}

// Don't split bundles during testing, since we only want import one bundle
if (!__TEST__) {
  webpackConfig.plugins.push(
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor']
    })

getPlugins() {
    // TODO inject DLLs `
    // TODO https://github.com/diurnalist/chunk-manifest-webpack-plugin
    const plugins = [
      new WebpackBar(),
      // remove outdated assets from previous builds.
      new CleanWebpackPlugin(),
      new webpack.DefinePlugin(this.getDefinedVars()),
      new CopyWebpackPlugin([{
        from: frameworkConfig.directories.resources,
        to: './',
        toType: 'dir',
      }]),

      // Inject webpack bundle into HTML.
      new HtmlWebpackPlugin({
        inject: true,
        templateContent: buildIndexPage(),

        // FIXME temporary hack for webpack 4 https://github.com/jantimon/html-webpack-plugin/issues/870
        chunksSortMode: 'none',
        minify: this.isDev ? false : {
          removeComments: true,
          collapseWhitespace: true,
          removeRedundantAttributes: true,
          useShortDoctype: true,
          removeEmptyAttributes: true,
          removeStyleLinkTypeAttributes: true,
          keepClosingSlash: true,
          minifyJS: true,
          minifyCSS: true,
          minifyURLs: true,

import * as path from "path";
import * as webpack from "webpack";
import HtmlWebPackPlugin from "html-webpack-plugin";

const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/ui/index.html",
  filename: "./index.html"
});

const config: webpack.Configuration = {
  mode: "production",
  entry: "./src/ui/index.tsx",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx", ".js", ".json"]
  },

const entryFile = `${entry}/init.js`;
                // 支持 init.js 文件不是必须存在的场景，纯html
                const isEntryFileExists = fs.existsSync(entryFile);
                const match = entry.match(/\/pages\/(.*)/);
                const pageName = match && match[1];

                let filename = '';
                if (htmlPrefix) {
                    filename = htmlPrefix + '/';
                }

                if (isEntryFileExists) {
                    newEntry[pageName] = entryFile;
                }

                htmlWebpackPlugins.push(new HtmlWebpackPlugin({
                    template: path.join(projectRoot, `src/pages/${pageName}/index.html`),
                    filename: `${filename}${pageName}.html`,
                    chunks: [pageName],
                    // assetsPrefix: `${assetsPrefix}/`,
                    inject: inject && isEntryFileExists,
                    minify: minifyHtml
                        ? {
                            html5: true,
                            collapseWhitespace: true,
                            preserveLineBreaks: false,
                            minifyCSS: true,
                            minifyJS: true,
                            removeComments: false
                        }
                        : false
                }));

function pluginsList(prod) {
  const plugins = [
      new webpack.optimize.ModuleConcatenationPlugin(),
      new webpack.optimize.CommonsChunkPlugin({
        names: ['vendor'],
        chunks: ['app'],
        minChunks: function (module) {
          return isExternal(module)
        }
      }),
      new webpack.NamedModulesPlugin(),
      new HtmlWebpackPlugin({
        filename: 'index.html',
        title: 'whs boilerplate app',
        template: 'index-template.html',
        chunks: ['vendor', 'app']
      }),
      new CompressionPlugin({
        asset: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.js$|\.css$|\.html$/,
        threshold: 1024,
        minRatio: 0.8
      })
  ];
  if(prod) {
    plugins.push(
      new webpack.LoaderOptionsPlugin({

}

    if (!fs.existsSync(indexHTML)) {
      console.error(chalk.red(`"${indexHTML}" is missing.`));
      process.exit(0);
    }

    result.push(
      new webpack.DllReferencePlugin({
        context: dll,
        manifest: require(dllManifest)
      }),

      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

      new HtmlWebpackPlugin({
        template: './index.html',
        xhtml: true,
        inject: true,
        favicon: 'favicon.png',
      }),

      new AddAssetHtmlPlugin([
        {
          filepath: path.resolve(dll, 'vendor.styles.css'),
          publicPath: publicPath, //path.join(publicPath, 'dll'),
          typeOfAsset: 'css'
        },
        {
          filepath: path.resolve(dll, 'vendor.dll.js'),
          publicPath: publicPath, //path.join(publicPath, 'dll')
        },

mainEntry = [CLIENT_POLYFILLS, CLIENT_ENTRY]
    }

    const entry: EntryPoints = {
        main: mainEntry,
    }

    const plugins = getPlugins(options.buildConfig)
    const resolvePlugins: webpack.ResolvePlugin[] = []

    if (SERVER_PUBLIC_DIR) {
        const indexHtml = path.resolve(SERVER_PUBLIC_DIR, 'index.html')

        if (fs.existsSync(indexHtml)) {
            plugins.push(
                new HtmlWebpackPlugin({
                    inject: true,
                    template: indexHtml,
                }),
            )
        }
    }

    return {
        entry,
        module: {
            rules: [getTypeScriptWebpackRule(plugins, resolvePlugins, options, 'client')],
        },
        output: {
            path: OUTPUT,
            publicPath: PUBLIC_PATH,
        },

module.exports = env => {
  const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body',
  });

  const PATHS = {
    app: path.join(__dirname, 'app/', 'entry/', 'index.js'),
    build: path.join(__dirname, 'dist'),
  };

  const NODE_ENV = env.NODE_ENV

  const isProduction = NODE_ENV === 'production';
  process.env.BABEL_ENV = NODE_ENV;

  const envPlugin = new webpack.DefinePlugin({

],
    output: {
      path: `${outputDir}/manager`,
      filename: '[name].[chunkhash].bundle.js',
      publicPath: '',
    },
    resolve: {
      extensions: ['.mjs', '.js', '.jsx', '.json'],
      alias: {
        'core-js': 'core-js',
        react: 'react',
        'react-dom': 'react-dom',
      },
    },
    plugins: [
      new HtmlWebpackPlugin({
        filename: 'index.html',
        title: packageFile.name,
        chunksSortMode: 'none',
        alwaysWriteToDisk: true,
        inject: false,
        templateParameters: (compilation, files, options) => ({
          compilation,
          files,
          options,
          dlls: ['/sb_dll/storybook_ui_dll.js'],
          headHtmlSnippet: getManagerHeadHtml(configDir, process.env),
        }),
        template: require.resolve(`${serverPath}/src/server/templates/index.ejs`),
      }),
    ],
    module: {

export default (lila, webpack, { entry, cmd, config }) => {
  const { HotModuleReplacementPlugin } = webpack;
  const { getSettings } = lila;
  const [root, devDir] = getSettings(['root', 'dev']);
  const devPath = join(root, devDir);

  const baseConfig = base(lila, webpack, { entry, cmd, config });

  baseConfig.plugins.unshift(new HotModuleReplacementPlugin());
  baseConfig.plugins.push(
    new HtmlWebpackPlugin({
      template: `${root}/${entry}/index.html`,
    })
  );

  return {
    entry: [
      'webpack-hot-middleware/client?reload=true',
      `${root}/${entry}/index.js`,
    ],
    output: {
      path: devPath,
      filename: 'index.js',
      publicPath: `/${devDir}/`,
    },
    ...baseConfig,
  };