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 のパスは前の2つ、

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

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

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


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

では👋