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

方針について

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

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

環境

Ionic 6.12.3 React 16.13

変更手順

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

csharpCopy code$ yarn add -D react-app-rewired

config-overrides.jsを追加

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

config-overrides.jsCopy code
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.jsonCopy code{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@pages/*": ["src/pages/*"]
    }
  }
}

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

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

package.jsonへscriptsを追加

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

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

コマンドを実行

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

arduinoCopy code $ yarn run postinstall

プロジェクトを実行

rubyCopy code
$ ionic serve

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