eject を使用せずに create-react-app の設定を変更する方法

yarn react-app-rewired をカスタマイズ cra -D に追加します

「スクリプト」: {
- "start": "react-scripts start",
+ "開始": "react-app-rewired 開始",
- "ビルド": "react-scriptsビルド",
+ "ビルド": "react-app-rewired ビルド",
}

モジュール.エクスポート = {}

糸を追加 antd -D

コスト { override, fixBabelImports } = require('customize-cra');
モジュール.エクスポート = オーバーライド(
	BabelImportsを修正
  	"輸入"、
    {
      "ライブラリ名": "antd",
      "ライブラリディレクトリ": "es",
      "スタイル": "css"
    }
  ）

糸にsassを追加 -D

糸を追加 less [email protected] -D

const { override、addLessLoader } = require('customize-cra');
モジュール.エクスポート = オーバーライド(
レスローダーを追加します({
// ここで他の less 設定を追加できます lessOptions: {
   	//必要に応じて設定してください〜
    }
})
);

const { override、addWebpackAlias ​​} = require('customize-cra');
定数パス = require('path');
モジュール.エクスポート = オーバーライド(
  // エイリアス
WebpackAliasを追加します({
    // モジュールをロードするときに、省略形として「@」記号を使用できます~
    '@': パスを解決します(__dirname, './src/')
  }）、
  // 外部
  WebpackExternalsを追加します({
    // public/index.html で紹介されている jQuery の対応するリモート ファイル アドレスに注意してください "jQuery": "jQuery"
  })

yarnadduglifyjs-webpack-プラグイン-D

const { override、addWebpackPlugin } = require('customize-cra');
定数 UglifyJsPlugin = require('uglifyjs-webpack-plugin');
モジュール.エクスポート = オーバーライド(
	// プラグインは本番環境で起動されることに注意してください
	process.env.NODE_ENV === 'production' && addWebpackPlugin(
  	新しいUglifyJsPlugin({
  		// パッケージキャッシュを有効にする cache: true,
  		// マルチスレッドパッケージングを有効にする parallel: true,
  		醜いオプション: {
  			// 警告を削除する warnings: false,
  			//圧縮 圧縮: {
  				// コンソールを削除する
  				drop_console: true、
  				// デバッガーを削除する
  				ドロップデバッガー: true
  			}
  		}
  	})
  ）

yarn に webpack-bundle-analyzer のクロス環境を追加します -D

// package.json ファイル "scripts": { "build:analyzer": "cross-env ANALYZER=true react-app-rewired build" }

yarnaddprogress-bar-webpack-プラグイン-D

const { override、addWebpackPlugin } = require('customize-cra');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
モジュール.エクスポート = オーバーライド(
	Webpackプラグインを追加します(新しいProgressBarPlugin())
）

// config-overrides.js
コスト { override、fixBabelImports、addWebpackPlugin、addLessLoader、addWebpackAlias、addWebpackExternals } = require('customize-cra');
定数パス = require('path');
定数 UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
モジュール.エクスポート = オーバーライド(
	BabelImportsを修正
  	"輸入"、
    {
			"ライブラリ名": "antd",
      "ライブラリディレクトリ": "es",
      "スタイル": "css"
    }
  ）、
  レスローダーを追加します({
		// ここで他の less 設定を追加できます lessOptions: {
   		//必要に応じて設定してください〜
    }
	}）、
  // エイリアス
	WebpackAliasを追加します({
    // モジュールをロードするときに、省略形として「@」記号を使用できます~
    '@': パスを解決します(__dirname, './src/')
  }）、
  // 外部
  WebpackExternalsを追加します({
    // public/index.html で紹介されている jQuery の対応するリモート ファイル アドレスに注意してください "jQuery": "jQuery"
  }）、
  // プラグインは本番環境で起動されることに注意してください
	process.env.NODE_ENV === 'production' && addWebpackPlugin(
  	新しいUglifyJsPlugin({
  		// パッケージキャッシュを有効にする cache: true,
  		// マルチスレッドパッケージングを有効にする parallel: true,
  		醜いオプション: {
  			// 警告を削除する warnings: false,
  			//圧縮 圧縮: {
  				// コンソールを削除する
  				drop_console: true、
  				// デバッガーを削除する
  				ドロップデバッガー: true
  			}
  		}
  	})
  ）、
  // 環境変数のANALYZERパラメータの値を決定します。process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin()),
  Webpackプラグインを追加します(新しいProgressBarPlugin())
）