How to use the react-scripts/config/paths.appHtml function in react-scripts

function getHtmlPlugin(bundle, isProd) {
    const opts = Object.assign({
      inject: true,
      template: paths.appHtml,
      // note: 2.x adds optimization with 'vendors' and 'runtime~bundle' in chunks
      chunks: ['vendors', 'runtime~' + bundle, bundle],
      filename: bundle + '.html',
    }, isProd ? { minify: Object.assign(defaultMinify, params.minify) } : {});

    return new HtmlWebpackPlugin(opts);
  }

// Make sure to add the new loader(s) before the "file" loader.
        ],
      },
    ],
  },
  plugins: [
    // Makes some environment variables available in index.html.
    // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
    // 
    // In production, it will be an empty string unless you specify "homepage"
    // in `package.json`, in which case it will be the pathname of that URL.
    new InterpolateHtmlPlugin(env.raw),
    // Generates an `index.html` file with the 

const hasSlash = inputPath.endsWith('/')
  if(hasSlash && !needsSlash) return inputPath.substr(0, inputPath.length - 1)
  else if(!hasSlash && needsSlash) return `${inputPath}/`
  else return inputPath
}

function getServedPath(publicUrl) {
  const servedUrl = publicUrl ? url.parse(publicUrl).pathname : '/'

  return ensureSlash(servedUrl, true)
}

paths.dotenv = existsSync(appDotEnv) ? appDotEnv : paths.dotenv
paths.appPath = appRootPath + '/'
paths.appPublic = appPublic
paths.appHtml = appPublic + '/index.html'
paths.appBuild = appBuild
paths.appPackageJson = appPackage
paths.yarnLockFile = appRootPath + '/yarn.lock'
paths.appSrc = appSrc
paths.appIndexJs = appSrc + '/index.js'
paths.proxySetup = appSrc + '/setupProxy.js'
paths.testsSetup = appSrc + '/setupTests'
paths.appNodeModules = appNodeModules
paths.servedPath = homepage ? getServedPath(homepage) : '/'
paths.publicUrl = homepage || ''

module.exports = paths

    filter: file => file !== paths.appHtml
  });

removeComments: true,
    collapseWhitespace: true,
    removeRedundantAttributes: true,
    useShortDoctype: true,
    removeEmptyAttributes: true,
    removeStyleLinkTypeAttributes: true,
    keepClosingSlash: true,
    minifyJS: {
      comments: '@cc_on',
    },
    minifyCSS: true,
    minifyURLs: true,
  };
  const config = Object.assign(
    {},
    { inject: true, template: paths.appHtml },
    'development' !== env ? { minify } : undefined,
  );
  return entry => {
    return new HtmlWebpackPlugin({
      ...config,
      chunks: ['vendors', `runtime~${entry}.html`, entry],
      filename: `${entry}.html`,
    });
  };
};

const createHtmlWebpackPlugin = (entryName, env) => {
  const config = {
    inject: true,
    template: paths.appHtml,
    chunks: ['vendors', `runtime~${entryName}`, entryName],
    filename: `${entryName}.html`,
  };
  if ('development' === env) {
    return new HtmlWebpackPlugin(config);
  } else {
    return new HtmlWebpackPlugin({
      ...config,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,

    filter: file => file !== paths.appHtml
  });