expo
👋 Welcome to
@expo/webpack-config
Webpack config that's optimized for running universal React and react-native-web projects
⚠️ Expo Webpack is in maintenance mode. We are actively working on a universal bundling solution that works for all platforms.
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. |
mode |
Mode |
required | The Webpack mode to bundle the project in. |
platform |
ExpoPlatform |
required | The target platform to bundle for. |
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. Native platforms are experimental and require a special native runtime. |
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-pwato learn more about creating the assets manually. - Disable automatic PWA generation with
expo build:web --no-pwa. expo build:webwill automatically skip any PWA asset that's already linked in the project's localweb/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:
<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.
{
"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:
<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
<link rel="apple-touch-icon" sizes="180x180" href="..." />Splash Screens
<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;
};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
Example of using service workers with Expo:
npx create-react-native-app -t with-workbox
This webpack config currently does not supply service workers by default, they can be added to the project locally: Adding Service Workers.
Environment Variables
EXPO_WEBPACK_DEFINE_ENVIRONMENT_AS_KEYS: Should the define plugin explicitly set environment variables likeprocess.env.FOOinstead of creating an object likeproces.env: { FOO }. Defaults tofalse. Next.js uses this to prevent overwriting injected environment variables.IMAGE_INLINE_SIZE_LIMIT: By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to 0 will disable the inlining of images. This is only used in production.
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.
