# A/B Tested, Feature Flagged, White-Label Apps with Webpack

DevFeed: [A/B Tested, Feature Flagged, White-Label Apps with Webpack](<https://devfeed.tech/articles/a-b-tested-feature-flagged-white-label-apps-with-webpack-19118.md>)

Original publisher: [Read original article](<https://medium.com/rbi-tech/a-b-tested-feature-flagged-white-label-apps-with-webpack-fddd4c629f1f?source=rss----904782439303---4>)

Author: Andy Weiss

Published: 2020-06-17T19:15:05Z

Content type: tutorial

Language: en

Sources: [RBI Tech](<https://devfeed.tech/sources/rbi-tech.md>)

Topics: [Webpack](<https://devfeed.tech/topics/webpack.md>), [React](<https://devfeed.tech/topics/react.md>), [configuration](<https://devfeed.tech/topics/configuration.md>), [import](<https://devfeed.tech/topics/import.md>), [App](<https://devfeed.tech/topics/app.md>)

Tags: [a-b-testing](<https://devfeed.tech/tags/a-b-testing.md>), [configuration](<https://devfeed.tech/tags/configuration.md>), [feature-flagging](<https://devfeed.tech/tags/feature-flagging.md>), [import](<https://devfeed.tech/tags/import.md>), [react](<https://devfeed.tech/tags/react.md>), [webpack](<https://devfeed.tech/tags/webpack.md>)

## AI overview

This tutorial explains how to customize Webpack in a Create React App project to build and deploy multiple application variants from one codebase. It discusses use cases including A/B testing, feature flagging, platform targeting, and custom themes, with attention to file-extension resolution and import behavior.

## Source excerpt

For most of us, the thought of tweaking our app's Webpack configuration inspires about the same level of excitement as a bi-annual trip to the dentist. We know it's important, necessary even -- certainly better than the alternative -- and yet, the goal is mostly to get in and out without anything going wrong. The popularity of Create React App and other tools is largely built upon their ability to abstract away these configuration details and allow developers to focus on shipping features quickly. But the better we know our tools, the more likely we are to recognize when they fit a particular problem we face in our work. For a certain class of project, it's worth considering Create React App's defaults as a starting point, rather than the end of the conversation. Thoughtfully applied, some small modifications can unlock a world of possibility. For example, we often know at the outset of a project that we will need to build and deploy different versions of our application. Whether it's for A/B testing, feature flagging, targeting specific platforms, or applying a custom theme, we want the ability to maintain multiple parallel universes around a single codebase without unnecessary duplication or complexity. Webpack's ability to select from a variety of file extensions at build time makes it an especially useful tool for this task. You'd probably be surprised to see how just easy it is to achieve a high level of flexibility with minimal configuration. More Intentional File Extensions Part of Webpack's magic comes from its ability to guess our intentions when we leave off the file extension at the end of an import. We do it so often we may barely notice, but how many times have we written code like this? https://medium.com/media/2f79921db578db57aa03929c826ccb82/href Maybe there's a Nav.js file in the components directory, or possibly the extension is .jsx or .tsx. Maybe Nav is actually a directory itself, and there's an index.js or index.jsx that's exporting the component