👋 Welcome to
@expo/webpack-config

Webpack config that's optimized for running React Native web projects

Documentation

To learn more about how to use this Webpack config, check out the docs here: Customizing the Webpack config

Contributing to the docs

• Documentation for the master branch
• Documentation for the latest stable release

API

Running expo customize:web will generate this default config in your project.

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function(env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // Customize the config before returning it.
  return config;
};

addons

For composing features into an existing Webpack config.

import /* */ '@expo/webpack-config/addons';

env

Getting the config, paths, mode, and various other settings in your environment.

import /* */ '@expo/webpack-config/env';

loaders

The module rules used to load various files.

import /* */ '@expo/webpack-config/loaders';

plugins

Custom versions of Webpack Plugins that are optimized for use with React Native.

import /* */ '@expo/webpack-config/plugins';

utils

Tools for resolving fields, or searching and indexing loaders and plugins.

import /* */ '@expo/webpack-config/utils';

Guides

Include modules

You may find that you want to include universal modules that aren't part of the default modules. You can do this by customizing the Webpack config:

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function(env, argv) {
    const config = await createExpoWebpackConfigAsync({
        ...env,
        babel: {
            dangerouslyAddModulePathsToTranspile: [
                // Ensure that all packages starting with @evanbacon are transpiled.
                '@evanbacon'
            ]
        }
    }, argv);
    return config;
};

withUnimodules

If you're adding support to some other Webpack config like in Storybook or Gatsby you can use the same process to include custom modules:

const { withUnimodules } = require('@expo/webpack-config/addons');

module.exports = function() {
  const someWebpackConfig = { /* Your custom Webpack config */ }

  // Add Expo support...
  const configWithExpo = withUnimodules(someWebpackConfig, {
      projectRoot: __dirname,
      babel: {
          dangerouslyAddModulePathsToTranspile: [
              // Ensure that all packages starting with @evanbacon are transpiled.
              '@evanbacon'
          ]
      }
  });

  return configWithExpo;
};

This method should be used instead of using the expo.web.build.babel.include field of the app.json.

Modify the babel loader

If you want to modify the babel loader further, you can retrieve it using the helper method getExpoBabelLoader like this:

const createExpoWebpackConfigAsync = require('@expo/webpack-config');
const { getExpoBabelLoader } = require('@expo/webpack-config/utils');

module.exports = async function(env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  const loader = getExpoBabelLoader(config);
  if (loader) {
      // Modify the loader...
  }
  return config;
};

License

The Expo source code is made available under the MIT license. Some of the dependencies are licensed differently, with the BSD license, for example.