Create-React-Appのwebpack.config.jsファイルを編集する

カスタムビルド出力フォルダを使用する

Create-React-Appでカスタムビルド出力フォルダを使用するには、以下の手順に従います。

1. package.jsonファイルを開きます。
2. "scripts"プロパティの中に、以下のキーを追加します。

"build": "react-scripts build",
"start": "react-scripts start",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:custom": "react-scripts build --output-path ./custom-build"

1. 上記の例では、build:customという名前の新しいスクリプトが追加されています。このスクリプトは、react-scripts buildコマンドを実行し、--output-pathフラグを使用してビルド出力フォルダを./custom-buildに指定します。
2. 以下のコマンドを実行して、カスタムビルド出力フォルダにアプリケーションをビルドします。

npm run build:custom

1. ビルドが完了すると、custom-buildフォルダ内にアプリケーションのファイルが生成されます。

オプション

Create-React-Appでカスタムビルド出力フォルダを使用するには、package.jsonファイルにbuild:customという名前の新しいスクリプトを追加し、--output-pathフラグを使用してビルド出力フォルダを指定する必要があります。

補足

• 上記の手順は、Create-React-App v5以降を使用している場合にのみ適用されます。
• Create-React-App v4を使用している場合は、react-scripts buildコマンドに--outフラグを使用してビルド出力フォルダを指定することができます。

// package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "My React application",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:custom": "react-scripts build --output-path ./custom-build"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.0"
  }
}

custom-build/
├── asset-manifest.json
├── favicon.ico
├── index.html
├── manifest.json
├── service-worker.js
└── static/
    ├── css/
    │   └── main.css
    ├── js/
    │   └── main.js
    └── media/
        └── logo.png

ビルド出力フォルダには、以下のファイルが含まれます。

• asset-manifest.json: アプリケーションのすべての静的アセッ トのリストを含むファイル
• favicon.ico: アプリケーションのfavicon
• index.html: アプリケーションのメインHTMLファイル
• manifest.json: アプリケーションのmanifestファイル
• service-worker.js: サービスワーカーファイル
• static/: アプリケーションのすべての静的アセットを含むフォルダ

注意

• カスタムビルド出力フォルダを使用する場合は、publicフォルダ内のファイルはビルド出力フォルダにコピーされません。これらのファイルが必要な場合は、build:customスクリプトで手動でコピーする必要があります。

Create-React-Appでカスタムビルド出力フォルダを使用する他の方法

環境変数を使用する

REACT_APP_BUILD_OUTPUTという名前の環境変数を設定して、カスタムビルド出力フォルダを指定することができます。この環境変数は、react-scripts buildコマンドによって読み取られます。

REACT_APP_BUILD_OUTPUT=./custom-build npm run build

webpack.config.jsファイルを編集して、outputプロパティのpathオプションを使用してカスタムビルド出力フォルダを指定することができます。

// webpack.config.js

module.exports = {
  // ...
  output: {
    path: "./custom-build",
    filename: "main.js",
  },
};

ejectコマンドを使用する

react-scripts ejectコマンドを実行すると、Create-React-Appの設定をすべて手動で構成できるようになります。このコマンドを実行すると、config/webpack.config.jsファイルが作成されます。このファイルで、outputプロパティのpathオプションを使用してカスタムビルド出力フォルダを指定することができます。

// config/webpack.config.js

module.exports = {
  // ...
  output: {
    path: "./custom-build",
    filename: "main.js",
  },
};

どの方法を使用するべきかは、プロジェクトの要件と開発者の好みによって異なります。

• 最も簡単な方法は、環境変数を使用する方法です。
• より多くの制御が必要な場合は、webpack.config.jsファイルを編集する方法を使用することができます。
• 完全な制御が必要な場合は、ejectコマンドを使用する方法を使用することができます。

Create-React-Appでカスタムビルド出力フォルダを使用するには、いくつかの方法があります。どの方法を使用するべきかは、プロジェクトの要件と開発者の好みによって異なります。