How to configure webpack for replacing your API module path by a Mock API Path


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:



Author: José Quinto
Copyright Notice: All articles in this blog are licensed under CC BY-SA 4.0 unless stating additionally.