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 によって webpack 複数のファイルをひとつにまとめるバンドラ などの設定ができるようになります。

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


パスを書き換える

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

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

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

JavaScript のパスは前の2つ、

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

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

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


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

では👋