【設定方法】ionic6のreactでwebpackの設定を変更する（webpack.configの上書き）

2021年1月23日

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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

方針について

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

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

環境

Ionic 6.12.3 React 16.13

変更手順

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

csharp$ 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"
  }
}