@expo/webpack-config
The default Webpack configuration used to build Expo apps targeting the web.
Last updated 11 days ago by brentvatne .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @expo/webpack-config 
SYNC missed versions from official npm registry.

???? Welcome to
@expo/webpack-config

Webpack config that's optimized for running universal React and react-native-web projects

Circle CI


Documentation

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

Contributing to the docs

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

Types

Environment

The main options used to configure how @expo/webpack-config works.

name type default description
projectRoot string required Root of the Expo project.
https boolean false Should the dev server use https protocol.
offline boolean true Passing false will disable offline support and skip adding a service worker.
mode Mode required The Webpack mode to bundle the project in.
platform ExpoPlatform required The target platform to bundle for. Only web and electron are supported.
removeUnusedImportExports boolean false Enables advanced tree-shaking with deep scope analysis.
pwa boolean true Generate the PWA image assets in production mode.
babel ExpoBabelOptions undefined Control how the default Babel loader is configured.

Environment internal

name type default description
config ExpoConfig undefined The Expo project config, this should be read using @expo/config.
locations FilePaths undefined Paths used to locate where things are.

ExpoPlatform

type description
'ios' | 'android' | 'web' | 'electron' The target platform to bundle for. Only web and electron are supported.

ExpoBabelOptions

Control how the default Babel loader is configured.

name type default description
dangerouslyAddModulePathsToTranspile string[] undefined Add the names of node_modules that should be included transpilation step.

Guides

PWAs

  • See the docs for expo-pwa to learn more about creating the assets manually.
  • Disable automatic PWA generation with expo build:web --no-pwa.
  • expo build:web will automatically skip any PWA asset that's already linked in the project's local web/index.html.
  • Having sharp CLI installed globally will speed up asset generation, if it's not installed, Jimp will be used instead.

Chrome PWAs

Manifest.json

The manifest.json will be created using the values in the project's app.config.js:

Generating the manifest.json will be skipped if the following exists in the project's web/index.html:

<summary>Show HTML</summary>
<link rel="manifest" href="..." />

If the icons array is defined in your manifest.json, then Chrome PWA icon generation will be skipped.

Chrome PWA Icons

Icons will be generated using the file defined in your app.config.js under android.icon and it'll fallback to icon.

<summary>Show manifest.json</summary>
{
  "icons": [
    {
      "src": "...",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "...",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "...",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Favicons

Favicons will be generated using the file defined in your app.config.js under web.favicon and it'll fallback to icon.

Asset generation for Favicons will be individually skipped if any of the following fields exist in your web/index.html:

<summary>Show HTML</summary>
<link rel="icon" type="image/png" sizes="16x16" href="..." />
<link rel="icon" type="image/png" sizes="32x32" href="..." />
<link rel="shortcut icon" href="..." />

Safari PWAs

Icons will be generated using the file defined in your app.config.js under ios.icon and it'll fallback to icon. The splash screens look at ios.splash and fallback to splash.

Asset generation for Safari PWA icons/splash screens will be individually skipped if any of the following fields exist in your web/index.html:

Icons
<summary>Show HTML</summary>
<link rel="apple-touch-icon" sizes="180x180" href="..." />
Splash Screens
<summary>Show HTML</summary>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
  href="..."
/>

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

Service workers

Service workers are great for emulating native functionality, so Expo web takes full advantage of them. But sometimes you'll need to drop down and modify them yourself.

How Expo service workers ... work

By default Expo web has a two part service worker. The first part web/expo-service-worker.js setups up optional features of the Expo SDK like Notifications. The second part web/service-worker.js is generated by Workbox and manages the offline support.

The entry point for the service workers is a file called: register-service-worker.js. This file gets copied to your static folder and registered in Webpack's entry property (which is why you don't see it referenced in index.html).

Extending the service worker

If you'd like to add extra functionality, you can simply:

  • Eject the Webpack config: expo customize:web
    • Select web/expo-service-worker.js
  • Modify the web/expo-service-worker.js however you'd like!

Fully disabling the service worker

This can have some unfortunate side-effects as application libraries like expo-notifications may expect the SW to exist. Proceed with caution.

  • Eject the Webpack config: expo customize:web
    • Select webpack.config.js
  • Modify the webpack.config.js:
const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function(env, argv) {
  // Set offline to `false`
  const config = await createExpoWebpackConfigAsync({ ...env, offline: false }, argv);
  return config;
};

Environment Variables

  • EXPO_WEBPACK_DEFINE_ENVIRONMENT_AS_KEYS: Should the define plugin explicitly set environment variables like process.env.FOO instead of creating an object like proces.env: { FOO }. Defaults to false. Next.js uses this to prevent overwriting injected environment variables.

Exports

addons

For adding features to an existing Webpack config.

withUnimodules

import { withUnimodules } from '@expo/webpack-config/addons';

Wrap your existing webpack config with support for Unimodules (Expo web). ex: Storybook ({ config }) => withUnimodules(config)

params

  • webpackConfig: AnyConfiguration = {} Optional existing Webpack config to modify.
  • env: InputEnvironment = {} Optional [Environment][#environment] options for configuring what features the Webpack config supports.
  • argv: Arguments = {}

withWorkbox

Add offline support with Workbox (workbox-webpack-plugin).

import { withWorkbox } from '@expo/webpack-config/addons';

withOptimizations

import { withOptimizations } from '@expo/webpack-config/addons';

withAlias

Apply aliases to a Webpack config.

import { withAlias } from '@expo/webpack-config/addons';

withDevServer

import { withDevServer } from '@expo/webpack-config/addons';

withNodeMocks

import { withNodeMocks } from '@expo/webpack-config/addons';

withEntry

import { withEntry } from '@expo/webpack-config/addons';

withTypeScriptAsync

import { withTypeScriptAsync } from '@expo/webpack-config/addons';

env

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

getConfig

import { getConfig } from '@expo/webpack-config/env';

getMode

import { getMode } from '@expo/webpack-config/env';

validateEnvironment

import { validateEnvironment } from '@expo/webpack-config/env';

getAliases

import { getAliases } from '@expo/webpack-config/env';

getPaths

import { getPaths } from '@expo/webpack-config/env';

getPathsAsync

import { getPathsAsync } from '@expo/webpack-config/env';

getServedPath

import { getServedPath } from '@expo/webpack-config/env';

getPublicPaths

import { getPublicPaths } from '@expo/webpack-config/env';

getProductionPath

import { getProductionPath } from '@expo/webpack-config/env';

getAbsolute

import { getAbsolute } from '@expo/webpack-config/env';

getModuleFileExtensions

import { getModuleFileExtensions } from '@expo/webpack-config/env';

loaders

The module rules used to load various files.

imageLoaderRule

import { imageLoaderRule } from '@expo/webpack-config/loaders';

This is needed for webpack to import static images in JavaScript files. "url" loader works like "file" loader except that it embeds assets smaller than specified limit in bytes as data URLs to avoid requests. A missing test is equivalent to a match.

fallbackLoaderRule

import { fallbackLoaderRule } from '@expo/webpack-config/loaders';

"file" loader makes sure those assets get served by WebpackDevServer. When you import an asset, you get its (virtual) filename. In production, they would get copied to the build folder. This loader doesn't use a "test" so it will catch all modules that fall through the other loaders.

styleLoaderRule

import { styleLoaderRule } from '@expo/webpack-config/loaders';

Default CSS loader.

plugins

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

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

ExpoDefinePlugin

import { ExpoDefinePlugin } from '@expo/webpack-config/plugins';

Required for expo-constants https://docs.expo.io/versions/latest/sdk/constants/. This surfaces the app.json (config) as an environment variable which is then parsed by expo-constants.

ExpoHtmlWebpackPlugin

import { ExpoHtmlWebpackPlugin } from '@expo/webpack-config/plugins';

Generates an index.html file with the <script> injected.

ExpoInterpolateHtmlPlugin

import { ExpoInterpolateHtmlPlugin } from '@expo/webpack-config/plugins';

Add variables to the index.html.

utils

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

resolveEntryAsync

import { resolveEntryAsync } from '@expo/webpack-config/utils';

What it does not do

  • Gzip compression: This was supported in beta but later removed in favor of hosting providers like Now and Netlify automatically compressing files in the server.

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.


License: MIT

Current Tags

  • 0.7.5-alpha.0                                ...           alpha (10 months ago)
  • 0.1.0-alpha.0                                ...           canary (a year ago)
  • 0.12.17                                ...           latest (11 days ago)
  • 0.4.1-alpha.0                                ...           next (a year ago)

109 Versions

  • 0.12.17                                ...           11 days ago
  • 0.12.16                                ...           13 days ago
  • 0.12.15                                ...           18 days ago
  • 0.12.14                                ...           19 days ago
  • 0.12.13                                ...           22 days ago
  • 0.12.12                                ...           a month ago
  • 0.12.11                                ...           a month ago
  • 0.12.10                                ...           a month ago
  • 0.12.9                                ...           2 months ago
  • 0.12.8                                ...           2 months ago
  • 0.12.7                                ...           2 months ago
  • 0.12.6                                ...           2 months ago
  • 0.12.5                                ...           2 months ago
  • 0.12.4                                ...           2 months ago
  • 0.12.4-alpha.0                                ...           2 months ago
  • 0.12.3                                ...           2 months ago
  • 0.12.2                                ...           2 months ago
  • 0.12.1                                ...           2 months ago
  • 0.12.0                                ...           3 months ago
  • 0.11.25                                ...           3 months ago
  • 0.11.24                                ...           3 months ago
  • 0.11.23                                ...           3 months ago
  • 0.11.22                                ...           3 months ago
  • 0.11.21                                ...           3 months ago
  • 0.11.20                                ...           3 months ago
  • 0.11.19                                ...           3 months ago
  • 0.11.18                                ...           3 months ago
  • 0.11.17                                ...           3 months ago
  • 0.11.16                                ...           3 months ago
  • 0.11.15                                ...           3 months ago
  • 0.11.14                                ...           3 months ago
  • 0.11.13                                ...           3 months ago
  • 0.11.12                                ...           3 months ago
  • 0.11.11                                ...           3 months ago
  • 0.11.10                                ...           3 months ago
  • 0.11.9                                ...           4 months ago
  • 0.11.8                                ...           4 months ago
  • 0.11.7                                ...           4 months ago
  • 0.11.6                                ...           4 months ago
  • 0.11.5                                ...           4 months ago
  • 0.11.4                                ...           4 months ago
  • 0.11.3                                ...           4 months ago
  • 0.11.2                                ...           4 months ago
  • 0.11.1                                ...           5 months ago
  • 0.11.0                                ...           5 months ago
  • 0.10.12                                ...           5 months ago
  • 0.10.11                                ...           6 months ago
  • 0.10.10                                ...           6 months ago
  • 0.10.9                                ...           6 months ago
  • 0.10.8                                ...           6 months ago
  • 0.10.7                                ...           7 months ago
  • 0.10.6                                ...           7 months ago
  • 0.10.5                                ...           7 months ago
  • 0.10.4                                ...           7 months ago
  • 0.10.3                                ...           7 months ago
  • 0.10.2                                ...           8 months ago
  • 0.10.1                                ...           8 months ago
  • 0.10.0                                ...           8 months ago
  • 0.9.0                                ...           8 months ago
  • 0.8.1                                ...           8 months ago
  • 0.8.0                                ...           9 months ago
  • 0.7.12                                ...           9 months ago
  • 0.7.11                                ...           9 months ago
  • 0.7.10                                ...           9 months ago
  • 0.7.9                                ...           9 months ago
  • 0.7.8                                ...           9 months ago
  • 0.7.6                                ...           9 months ago
  • 0.7.5                                ...           10 months ago
  • 0.7.5-alpha.0                                ...           10 months ago
  • 0.7.4                                ...           a year ago
  • 0.7.3                                ...           a year ago
  • 0.7.2                                ...           a year ago
  • 0.7.1                                ...           a year ago
  • 0.7.0                                ...           a year ago
  • 0.6.2                                ...           a year ago
  • 0.6.1                                ...           a year ago
  • 0.6.0                                ...           a year ago
  • 0.5.19                                ...           a year ago
  • 0.5.18                                ...           a year ago
  • 0.5.17                                ...           a year ago
  • 0.5.16                                ...           a year ago
  • 0.5.15                                ...           a year ago
  • 0.5.14                                ...           a year ago
  • 0.5.13                                ...           a year ago
  • 0.5.12                                ...           a year ago
  • 0.5.11                                ...           a year ago
  • 0.5.10                                ...           a year ago
  • 0.5.9                                ...           a year ago
  • 0.5.8                                ...           a year ago
  • 0.5.7                                ...           a year ago
  • 0.5.6                                ...           a year ago
  • 0.5.5                                ...           a year ago
  • 0.5.4                                ...           a year ago
  • 0.5.3                                ...           a year ago
  • 0.5.2                                ...           a year ago
  • 0.5.1                                ...           a year ago
  • 0.5.0                                ...           a year ago
  • 0.4.1-alpha.0                                ...           a year ago
  • 0.4.0                                ...           a year ago
  • 0.3.0                                ...           a year ago
  • 0.2.0                                ...           a year ago
  • 0.1.6                                ...           a year ago
  • 0.1.5                                ...           a year ago
  • 0.1.4                                ...           a year ago
  • 0.1.3                                ...           a year ago
  • 0.1.2                                ...           a year ago
  • 0.1.2-alpha.0                                ...           a year ago
  • 0.1.1                                ...           a year ago
  • 0.1.0-alpha.0                                ...           a year ago
Downloads
Today 26
This Week 93
This Month 422
Last Day 67
Last Week 408
Last Month 2,109

Copyright 2014 - 2016 © taobao.org |