create-react-app で自動生成される CSS や JS へのパスを変更する方法

create-react-appで作成したアプリでは、デフォルトでは CSS や画像や JS へのパスが

/static/css/main.xxxxxxxx.chunk.css、

/static/media/...、

/static/js/...chunk.js

のようになっています。

何らかの事情でこれを変えたいときがあります。

今回はこれらのパスを変更する方法をご紹介します。

設定ファイルを表示させる

まずはプロジェクトのルートディレクトリでnpm run ejectのコマンドを入力して、

設定ファイルを出現させます。

実はcreate-react-appをしただけでは、細かい設定をするためのファイル群は隠れたままなのです。

eject によって などの設定ができるようになります。

実行後はルートディレクトリにconfigディレクトリが生成されます。

パスを書き換える

webpack の設定ファイルconfig/webpack.config.jsを編集します。

長大なファイルなので、ファイル内検索でstaticを検索します。

webpack.config.js
1
...
2
      filename: isEnvProduction
3
        ? 'static/js/[name].[contenthash:8].js'         // ← ここを変える
4
        : isEnvDevelopment && 'static/js/bundle.js',
5
      // TODO: remove this when upgrading to webpack 5
6
      futureEmitAssets: true,
7
      // There are also additional JS chunk files if you use code splitting.
8
      chunkFilename: isEnvProduction
9
        ? 'static/js/[name].[contenthash:8].chunk.js'   // ← ここを変える
10
        : isEnvDevelopment && 'static/js/[name].chunk.js',
11
...
12
              options: {
13
                limit: imageInlineSizeLimit,
14
                name: 'static/media/[name].[hash:8].[ext]',   // ← ここを変える
15
              },
16
...
17
              options: {
18
                name: 'static/media/[name].[hash:8].[ext]',   // ← ここを変える
19
              },
20
...
21
        new MiniCssExtractPlugin({
22
          // Options similar to the same options in webpackOptions.output
23
          // both options are optional
24
          filename: 'static/css/[name].[contenthash:8].css',              // ← ここを変える
25
          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',   // ← ここを変える
26
        }),
27
...

JavaScript のパスは前の２つ、

画像ファイルなどのパスは中の２つ、

CSS のパスは後の２つを変更すれば十分です。

ファイルを読み込んでおらず構造もつかめていないので、両方必要かはわかりません。

お役に立てれば幸いです。

では