1---
2title: Bundling with webpack
3description: Learn about different webpack bundler configurations that can be customized.
4---
5
6When you run `npx expo start --web` or `expo export:web` the CLI will check to see if your project has a **webpack.config.js** in the root directory. If the project doesn't then Expo will use the default `@expo/webpack-config` (preferred).
7
8> This is similar to `react-scripts` & `create-react-app`.
9
10If you need to edit the config the best way to do this is by running `npx expo customize webpack.config.js`.
11This will install `@expo/webpack-config` as a dev dependency and create a template `./webpack.config.js` in your project.
12You can now make changes to a config object based on the default config and return it for Expo CLI to use.
13Deleting the config will cause Expo to fall back to the default again.
14
15If you create a new webpack config or make any changes to it you'll need to restart your webpack dev server with `npx expo start`.
16
17## Example
18
19```js webpack.config.js
20const createExpoWebpackConfigAsync = require('@expo/webpack-config');
21
22// Expo CLI will await this method so you can optionally return a promise.
23module.exports = async function (env, argv) {
24  const config = await createExpoWebpackConfigAsync(env, argv);
25  // If you want to add a new alias to the config.
26  config.resolve.alias['moduleA'] = 'moduleB';
27
28  // Maybe you want to turn off compression in dev mode.
29  if (config.mode === 'development') {
30    config.devServer.compress = false;
31  }
32
33  // Or prevent minimizing the bundle when you build.
34  if (config.mode === 'production') {
35    config.optimization.minimize = false;
36  }
37
38  // Finally return the new config for the CLI to use.
39  return config;
40};
41```
42
43## Polyfills
44
45React Native for web uses [some advanced browser features](https://github.com/necolas/react-native-web/blob/e4ed0fd3c863e6c61aa3ea8afeff79b7fa74b461/packages/docs/src/introduction.stories.mdx#install) that might not be available in every browser. Expo web tries to make including these features as simple and efficient as possible with `@expo/webpack-config`.
46
47### ResizeObserver
48
49- [Browser support](https://caniuse.com/#feat=resizeobserver)
50
51**TL;DR:** To fully support `onLayout` install `resize-observer-polyfill`.
52
53The `onLayout` prop that's used in all of the core primitives like View, Image, Text, ScrollView, etc. requires an API called [`ResizeObserver`](https://drafts.csswg.org/resize-observer-1/). This API isn't fully supported across all browsers, iOS Safari (in iOS 13) is a good example. If the device doesn't support `ResizeObserver` then `react-native-web` will fallback on `window.onresize` and you'll see a warning in the logs:
54
55```
56onLayout relies on ResizeObserver which is not supported by your browser.
57Please include a polyfill, e.g., https://github.com/que-etc/resize-observer-polyfill.
58Falling back to window.onresize.
59```
60
61To get everything working properly, you'll want to install and include a global polyfill for `ResizeObserver`.
62
63### Adding ResizeObserver
64
65- Install the polyfill: `yarn add resize-observer-polyfill`
66- Restart the project and `@expo/webpack-config` will automatically include the polyfill.
67
68The reason it automatically includes the polyfill is because `react-native-web` needs it included immediately. webpack is able to inject the polyfill before any of the application code has been executed. Alternatively you can customize the webpack config and include the polyfill in the `entry` field yourself.
69
70### Testing the ResizeObserver polyfill
71
72- Open the running Expo project in iOS Safari
73- Connect the device to an Apple computer
74- Open Safari on the computer in go to `Develop > [YOUR DEVICE] > [YOUR HOST]`
75- Ensure the logs don't have the `onLayout relies on ResizeObserver...` warning.
76
77## Editing static files
78
79You can also use `npx expo customize` to generate the static project files: **index.html**, **serve.json**, and so on.
80These can be used to customize your project in a more familiar way.
81
82All of the files you select from the terminal prompt will be copied to a **web/** directory in your project's root directory. Think of this directory as **public/** in Create React App. We use "web" instead of "public" because Expo webpack is web-only, the static directory does not work for Android or iOS apps. For mobile platforms, we similarly put platform-specific project files in **android** and **ios** directories.
83
84Deleting any of these files will cause Expo webpack to fallback to their respective default copies.
85
86### Why
87
88- Customizing the favicon icon
89- Adding third-party API code to the `<head/>` in your **index.html**
90- Changing the caching policy in the **serve.json** file
91