create-react-appしたときのローダーの追加

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が将来的に別のコマンドに置き換えられる可能性がある、と言うべきところだと思う。