Introduction
I’ve been working with React, webpack and TypeScript for almost two years, and it still surprise me when I look for a really custom solution and I end up with a generic solution which will solve my specific problem in a generic way.
Today, I am going to write about how to configure webpack to provide different Module path depending on our configuration. In my scenario I have two different APIs one is the “REAL” one and other is the “MOCK”. And I’d like to use the mocked API for development configuration and the real one for Production.
Let’s say we have a function to get all terms of a given taxonomy term set (in SharePoint Online) in order to display them in a React application. We are going to describe how to create the real API, Mock API, how to configure webpack to do the “generic replacement” and how to use the API.
Real API
Mock API
How to configure webpack
My recommendation is using a NormalModuleReplacementPlugin in our development configuration for webpack:
Usage