How to use @expo/webpack-config - 10 common examples

if (entries.renderer.length > 2) {
          throw new Error(
            `electron-adapter app entry hack doesn't work with this version of electron-webpack. The expected entry length should be 2, instead got: [${entries.renderer.join(
              ', '
            )}]`
          );
        } else {
          console.log(` Using custom entry point > ${expoEntryPointPath}`);
        }
      }
      return entries;
    };
  }

  const babelConfig = createBabelLoaderFromEnvironment(env);

  // Modify externals https://github.com/electron-userland/electron-webpack/issues/81
  const includeFunc = babelConfig.include as (path: string) => boolean;
  if (config.externals) {
    config.externals = (config.externals as any)
      .map((external: any) => {
        if (typeof external !== 'function') {
          const relPath = path.join('node_modules', external);
          if (!includeFunc(relPath)) return external;
          return null;
        }
        return (ctx: any, req: any, cb: any) => {
          const relPath = path.join('node_modules', req);
          return includeFunc(relPath) ? cb() : external(ctx, req, cb);
        };
      })

webpack(config: AnyConfiguration, options: any): AnyConfiguration {
      const expoConfig = withUnimodules(
        config,
        {
          projectRoot: nextConfig.projectRoot || process.cwd(),
        },
        { supportsFontLoading: false }
      );
      // Use original public path
      (expoConfig.output || {}).publicPath = (config.output || {}).publicPath;

      // TODO: Bacon: use commonjs for RNW babel maybe...
      if (typeof nextConfig.webpack === 'function') {
        return nextConfig.webpack(expoConfig, options);
      }

      return expoConfig;
    },

config.plugins.splice(plugin.index, 1, new HtmlWebpackPlugin(options));
    config.plugins.splice(
      plugin.index + 1,
      0,
      // Add variables to the `index.html`
      // @ts-ignore
      ExpoInterpolateHtmlPlugin.fromEnv(env, HtmlWebpackPlugin)
    );
  }

  // Add support for expo-constants
  // @ts-ignore: webpack version mismatch
  config.plugins.push(ExpoDefinePlugin.fromEnv(env));

  // Support platform extensions
  config.resolve.extensions = getModuleFileExtensions('electron', 'web');
  config.resolve.extensions.push('.node');

  if (!options.skipEntry) {
    if (!env.locations.appMain) {
      throw new Error(
        `The entry point for your project couldn't be found. Please install \`expo\`, or define it in the package.json main field`
      );
    }

    const electronWebpackDefaultEntryPoints = [
      path.resolve(env.projectRoot, 'index'),
      path.resolve(env.projectRoot, 'app'),
    ];
    const expoEntry = config.entry;
    config.entry = async () => {
      const entries = await resolveEntryAsync(expoEntry);

export function withExpoWebpack(
  config: AnyConfiguration,
  options: { projectRoot?: string; skipEntry?: boolean } = {}
) {
  // Support React Native aliases
  // @ts-ignore: webpack version mismatch
  config = withAlias(config);

  const projectRoot = options.projectRoot || process.cwd();

  const env: any = {
    platform: 'electron',
    projectRoot,
    mode: config.mode === 'production' ? config.mode : 'development',
    locations: getPaths(projectRoot),
  };
  if (!config.plugins) config.plugins = [];
  if (!config.resolve) config.resolve = {};

  env.config = getConfig(env);

  const [plugin] = getPluginsByName(config, 'HtmlWebpackPlugin');
  if (plugin) {

// Support React Native aliases
  // @ts-ignore: webpack version mismatch
  config = withAlias(config);

  const projectRoot = options.projectRoot || process.cwd();

  const env: any = {
    platform: 'electron',
    projectRoot,
    mode: config.mode === 'production' ? config.mode : 'development',
    locations: getPaths(projectRoot),
  };
  if (!config.plugins) config.plugins = [];
  if (!config.resolve) config.resolve = {};

  env.config = getConfig(env);

  const [plugin] = getPluginsByName(config, 'HtmlWebpackPlugin');
  if (plugin) {
    const { options } = plugin.plugin as any;
    // Replace HTML Webpack Plugin so we can interpolate it
    // @ts-ignore: webpack version mismatch
    config.plugins.splice(plugin.index, 1, new HtmlWebpackPlugin(options));
    config.plugins.splice(
      plugin.index + 1,
      0,
      // Add variables to the `index.html`
      // @ts-ignore
      ExpoInterpolateHtmlPlugin.fromEnv(env, HtmlWebpackPlugin)
    );
  }

export function withExpoWebpack(
  config: AnyConfiguration,
  options: { projectRoot?: string; skipEntry?: boolean } = {}
) {
  // Support React Native aliases
  // @ts-ignore: webpack version mismatch
  config = withAlias(config);

  const projectRoot = options.projectRoot || process.cwd();

  const env: any = {
    platform: 'electron',
    projectRoot,
    mode: config.mode === 'production' ? config.mode : 'development',
    locations: getPaths(projectRoot),
  };
  if (!config.plugins) config.plugins = [];
  if (!config.resolve) config.resolve = {};

  env.config = getConfig(env);

  const [plugin] = getPluginsByName(config, 'HtmlWebpackPlugin');
  if (plugin) {
    const { options } = plugin.plugin as any;
    // Replace HTML Webpack Plugin so we can interpolate it
    // @ts-ignore: webpack version mismatch
    config.plugins.splice(plugin.index, 1, new HtmlWebpackPlugin(options));
    config.plugins.splice(
      plugin.index + 1,
      0,
      // Add variables to the `index.html`

const { options } = plugin.plugin as any;
    // Replace HTML Webpack Plugin so we can interpolate it
    // @ts-ignore: webpack version mismatch
    config.plugins.splice(plugin.index, 1, new HtmlWebpackPlugin(options));
    config.plugins.splice(
      plugin.index + 1,
      0,
      // Add variables to the `index.html`
      // @ts-ignore
      ExpoInterpolateHtmlPlugin.fromEnv(env, HtmlWebpackPlugin)
    );
  }

  // Add support for expo-constants
  // @ts-ignore: webpack version mismatch
  config.plugins.push(ExpoDefinePlugin.fromEnv(env));

  // Support platform extensions
  config.resolve.extensions = getModuleFileExtensions('electron', 'web');
  config.resolve.extensions.push('.node');

  if (!options.skipEntry) {
    if (!env.locations.appMain) {
      throw new Error(
        `The entry point for your project couldn't be found. Please install \`expo\`, or define it in the package.json main field`
      );
    }

    const electronWebpackDefaultEntryPoints = [
      path.resolve(env.projectRoot, 'index'),
      path.resolve(env.projectRoot, 'app'),
    ];

if (!config.resolve) config.resolve = {};

  env.config = getConfig(env);

  const [plugin] = getPluginsByName(config, 'HtmlWebpackPlugin');
  if (plugin) {
    const { options } = plugin.plugin as any;
    // Replace HTML Webpack Plugin so we can interpolate it
    // @ts-ignore: webpack version mismatch
    config.plugins.splice(plugin.index, 1, new HtmlWebpackPlugin(options));
    config.plugins.splice(
      plugin.index + 1,
      0,
      // Add variables to the `index.html`
      // @ts-ignore
      ExpoInterpolateHtmlPlugin.fromEnv(env, HtmlWebpackPlugin)
    );
  }

  // Add support for expo-constants
  // @ts-ignore: webpack version mismatch
  config.plugins.push(ExpoDefinePlugin.fromEnv(env));

  // Support platform extensions
  config.resolve.extensions = getModuleFileExtensions('electron', 'web');
  config.resolve.extensions.push('.node');

  if (!options.skipEntry) {
    if (!env.locations.appMain) {
      throw new Error(
        `The entry point for your project couldn't be found. Please install \`expo\`, or define it in the package.json main field`
      );

config = withAlias(config);

  const projectRoot = options.projectRoot || process.cwd();

  const env: any = {
    platform: 'electron',
    projectRoot,
    mode: config.mode === 'production' ? config.mode : 'development',
    locations: getPaths(projectRoot),
  };
  if (!config.plugins) config.plugins = [];
  if (!config.resolve) config.resolve = {};

  env.config = getConfig(env);

  const [plugin] = getPluginsByName(config, 'HtmlWebpackPlugin');
  if (plugin) {
    const { options } = plugin.plugin as any;
    // Replace HTML Webpack Plugin so we can interpolate it
    // @ts-ignore: webpack version mismatch
    config.plugins.splice(plugin.index, 1, new HtmlWebpackPlugin(options));
    config.plugins.splice(
      plugin.index + 1,
      0,
      // Add variables to the `index.html`
      // @ts-ignore
      ExpoInterpolateHtmlPlugin.fromEnv(env, HtmlWebpackPlugin)
    );
  }

  // Add support for expo-constants
  // @ts-ignore: webpack version mismatch

.map((external: any) => {
        if (typeof external !== 'function') {
          const relPath = path.join('node_modules', external);
          if (!includeFunc(relPath)) return external;
          return null;
        }
        return (ctx: any, req: any, cb: any) => {
          const relPath = path.join('node_modules', req);
          return includeFunc(relPath) ? cb() : external(ctx, req, cb);
        };
      })
      .filter(Boolean);
  }

  // Replace JS babel loaders with Expo loaders that can handle RN libraries
  const rules = getRulesByMatchingFiles(config, [env.locations.appMain]);

  for (const filename of Object.keys(rules)) {
    for (const loaderItem of rules[filename]) {
      (config.module || { rules: [] }).rules.splice(loaderItem.index, 0, babelConfig);
      return config;
    }
  }

  return config;
}