How to add custom webpack config with ionic v4 and react?

I have set up a project using ionic framework v4 with React and wish to add a webpack loader to allow importing graphql queries from .graphql files, as described here.

I can't find any official documentation on how to change anything relating to webpack (for example, nothing here), and existing answers on the subject seem to apply only to using Angular or v2/v3 of ionic.

The Apollo docs describe an alternative way of solving this for Create-React-App (which I may try as a workaround), but I might wish to change webpack config in other ways, so I am also asking how to solve this question more generally.

Solution

You can customize webpack using react-app-rewired

If you don't use ionic cli to build and run your app, you can use a normal install of react-app-rewired.

If you use the ionic cli, there is an additional step/trick:

Ionic uses react-scripts under the hood, so you need to trick it into using react-app-rewired instead of react-scripts.

Here is a simple and low-invasive way to have Ionic cli use react-app-rewired instead of react-scripts: add this package.json postinstall script:

{
  "scripts": {
    "postinstall": "cd node_modules/.bin && mv react-scripts react-scripts-real && ln -s ../react-app-rewired/bin/index.js react-scripts",
    ...
  }
}