import時のaliasを利用したり、webpackのプラグインを利用したかったのですが
ドキュメントには公式的なやり方の記載がなかったためやり方をメモします。

方針について

旧バージョンではpackage.jsonへ ionic_webpack を追記しwebpackの設定を変更出来たようなのですが
Ionic6ではこの設定を変更しても設定が反映されませんでした。

そのため react-app-rewired を利用してwebpack.configの設定を上書きするやり方で対応します。

環境

Ionic 6.12.3 React 16.13

変更手順

react-app-rewiredをインストール

$ yarn add -D react-app-rewired

config-overrides.jsを追加

プロジェクト直下に config-overrides.js を作成し
追加したい瀬エッ邸を記述。
こちらの例ではaliasを追加しています。

config-overrides.js

const path = require('path');

module.exports = function override(config, env) {
  config.resolve.alias = {
    ...config.resolve.alias,
    '@pages': path.resolve(__dirname, 'src/pages')
  };
  return config;
};

tsconfig.jsonを変更

tsconfig.paths.json を作成し
エイリアスの設定を追記します。

tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@pages/*": ["src/pages/*"]
    }
  }
}

追加したファイルを読み込みます。

tsconfig.json
{
  "extends": "./tsconfig.paths.json"
}

package.jsonへscriptsを追加

ionic serve は内部的に react-scripts を実行しているため 下記コマンドを追加し実行してハック的にコマンドを書き換えます。

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

コマンドを実行

追加したnpm scriptsを実行します。

 $ yarn run postinstall

プロジェクトを実行

$ ionic serve

参考 https://stackoverflow.com/questions/58953616/how-to-add-custom-webpack-config-with-ionic-v4-and-react