【設定方法】ionic6のreactでwebpackの設定を変更する(webpack.configの上書き)
IonicwebpackReact
Memo
この記事は公開されてから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をインストール
$ 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
終わりに
最後までご覧いただきありがとうございます。
この記事では【設定方法】ionic6のreactでwebpackの設定を変更する(webpack.configの上書き)について紹介させていただきました。
これからも皆様の開発に役立つ情報を提供していきたいと考えています。
今後ともよろしくお願いいたします。