How to use html-webpack-plugin - 10 common examples

console.log('Source Folder:', srcFolder);
console.log('Output Folder:', distFolder);
console.log('isProduction:', isProduction);
console.log('isProfiling:', isProfiling);

const cssVarsFiles = [
  '../src/Styles/Variables/colors',
  '../src/Styles/Variables/dimensions',
  '../src/Styles/Variables/fonts',
  '../src/Styles/Variables/animations',
  '../src/Styles/Variables/zIndexes'
].map(require.resolve);

// Override the way HtmlWebpackPlugin injects the scripts
HtmlWebpackPlugin.prototype.injectAssetsIntoHtml = function(html, assets, assetTags) {
  const head = assetTags.head.map((v) => {
    v.attributes = { rel: 'stylesheet', type: 'text/css', href: `/${v.attributes.href.replace('\\', '/')}` };
    return this.createHtmlTag(v);
  });
  const body = assetTags.body.map((v) => {
    v.attributes = { src: `/${v.attributes.src}` };
    return this.createHtmlTag(v);
  });

  return html
    .replace('', head.join('\r\n  '))
    .replace('', body.join('\r\n  '));
};

const plugins = [
  new OptimizeCssAssetsPlugin({}),

}
    })
  );
} 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
                }));

compiler.hooks.compilation.tap('HtmlWebpackPartialsPlugin', compilation => {

      HtmlWebpackPlugin.getHooks(compilation).afterTemplateExecution.tapAsync('HtmlWebpackPartialsPlugin', (data, callback) => {

        // If the input isn't an array, add it as one to simplify the process

        if ( !Array.isArray(this.settings) ) {
          this.settings = [ this.settings ];
        }

        const partial_collection = this.settings.map(partial => {
          return new Partial(partial);
        }).filter(partial => {

          // User option to conditionally inject snippet to allow for config based
          // injection management. Additionally check to see if the partial template
          // filename matches the current HTML Webpack Plugin instance. This defaults
          // to index.html if not set

compiler.hooks.compilation.tap(NAME, compilation => {
      require('html-webpack-plugin')
        .getHooks(compilation)
        .alterAssetTagGroups.tapAsync(
          NAME,
          (
            data: {
              headTags: Array<{ tagName: string; attributes: { [key: string]: any }; innerHTML?: string }>
            },
            cb: (error: Error | null, data: any) => void,
          ) => {
            // inject enviroments
            data.headTags.push({
              tagName: 'script',
              attributes: {},
              innerHTML: `window.${this.namespace} = ${JSON.stringify(this.env, null, 2)}`,
            })
            cb(null, data)

compiler.hooks.compilation.tap(ID, compilation => {
      HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapAsync(
        ID,
        ({ plugin, bodyTags: body, headTags: head }, cb) => {
          const targetDir = compiler.options.output.path;
          // get stats, write to disk
          const htmlName = path.basename(plugin.options.filename);
          // Watch out for output files in sub directories
          const htmlPath = path.dirname(plugin.options.filename);
          const tempFilename = path.join(
            targetDir,
            htmlPath,
            `assets-${htmlName}.json`
          );
           if (!fs.existsSync(tempFilename)) {
            fs.mkdirpSync(path.dirname(tempFilename));
            const newBody = body.filter(
              a => a.tagName === 'script' && a.attributes

module.exports.tapHtml = (tappable, name, plugin) => {
  try {
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    return HtmlWebpackPlugin.getHooks /* HtmlWebpackPlugin >= 4.0 */
      ? HtmlWebpackPlugin.getHooks(tappable).afterTemplateExecution.tapAsync(name, plugin)
      : module.exports.tap(tappable, 'html-webpack-plugin-before-html-processing', name, plugin)
      ;
  } catch (_) {
    // ignore
  }
};

compiler.hooks.compilation.tap(ID, compilation => {
      // Support newest and oldest version.
      if (HtmlWebpackPlugin.getHooks) {
        HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapAsync(
          ID,
          this.alterAssetTagGroups.bind(this, compiler)
        );
      } else {
        compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(
          ID,
          this.alterAssetTagGroups.bind(this, compiler)
        );
      }
    });
  }