Reactで開発するときのローダーの追加方法を調べるのにかなり手間取ったのでメモする。
$ cd path/to/project-root-directory/
$ npm i -D react-app-rewired customize-cra
$ npm i -D raw-loader
$ vi config-overrides.js
//--------------------------------------
const { override, addWebpackModuleRule } = require('customize-cra');
module.exports = override(
addWebpackModuleRule({
test: /\.txt$/,
use: 'raw-loader',
})
);
//--------------------------------------
$vi package.json
//--------------------------------------
//react-scriptsをreact-app-rewiredに変更
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
//--------------------------------------
「react-app-rewired」と「customize-cra」というパッケージをインストール。これが上書きに必要なパッケージらしい。それとローダーもインストール(今回は「raw-loader」)。それと設定ファイル(config-override.js)を追加して、package.jsonの更新。
調べても全然記事が見つからなくて、ChatGPTが答えてくれた。ChatGPTにしては珍しく回答がそのまま使えた。
巷では「create-react-appが非推奨になりつつある」という記事が溢れているが、非推奨という言葉の使い方が間違っているように思う。あたかも「create-react-app」すると問題が生じると言っているように聞こえる(問題がないわけではない)。create-react-appが将来的に別のコマンドに置き換えられる可能性がある、と言うべきところだと思う。