Custom webpack.config.js define extra variables in ExpoInterpolateHtmlPlugin

[ptgodev]

What’s the best way to extend the existing ExpoInterpolateHtmlPlugin?

I want to add extra process.env vars so that I can use them in my index.html file.

[ptgodev]

Correct me if I’m wrong. This but this seems to work:

const createExpoWebpackConfigAsync = require("@expo/webpack-config");
const { ExpoInterpolateHtmlPlugin } = require("@expo/webpack-config/plugins");
const { getPluginsByName } = require("@expo/webpack-config/utils");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  const [plugin] = getPluginsByName(config, "HtmlWebpackPlugin");

  if (plugin) {
    const { options } = plugin.plugin;

    const newExpoInterpolateHtmlPlugin = ExpoInterpolateHtmlPlugin.fromEnv(
      env,
      HtmlWebpackPlugin
    );

    newExpoInterpolateHtmlPlugin.replacements = {
      ...newExpoInterpolateHtmlPlugin.replacements,
      TARGET: process.env.TARGET,
    };

    config.plugins.splice(plugin.index, 1, new HtmlWebpackPlugin(options));
    config.plugins.splice(plugin.index + 1, 1, newExpoInterpolateHtmlPlugin);
  }

  return config;
};