How to include web (browser) extension specific scripts in the expo webpack config?

Expo Development Tools
1

We’re building an Expo mobile app and a companion browser extension.

The extension will re-use most of the code. However, there are a couple of browser extension specific scripts, like the ./web/background.js file.

With the default expo webpack config, the ./web/background.js file gets ONLY copied over the ‘web-build’ directory. However, I want to include it in the webpack compilation process, so that:

  1. In ./web/background.js I can import other modules (from node_modules and from the ./src folder).

  2. Have this single file compiled to ./web-build/background.bundle.js, so we can reference it in the browser extension custom manifest file.

Can you please advice me how to leverage the @expo/webpack-config to achieve that?

2

You may need to do some further digging to figure out the exact webpack config needed in order to achieve this, but you can at least extend the default Expo for web configuration by running npx expo customize:web and choosing the files you would like to customize (e.g., the webpack config). Then you can customize the webpack config like you would any other web app.