creat-react-apのwebpack構成を拡張します.

reactプロジェクトを作る時、私達は主にcreat-react-ap足場でプロジェクトを作ります.creat-react-apはwebpackの構成をカプセル化してデフォルトで設定ファイルを隠しました.webpackの構成を拡張する必要がある場合は、npm run ejectを実行して、設定ファイルを暴露してから、プロファイルを拡張する必要があります.
この方式の欠点:

npm run ejectは、不可逆と命名されています.一旦構成ファイルが露出されたら、もう隠してはいけません.

拡張された構成とcreat-react-ap内に構築されたwebpack構成が混在していて、構成に問題が発生した後の検査に不利です.

react-ap-rewiredを使って再構成します.
react-ap-rewiredは、creat-react-apをカスタマイズしたコミュニティソリューションです.これは直接にcreate-react-apのデフォルトの構成を修正するのではなく、creat-react-apの構成をもとに拡張します.
使用手順
1.react-ap-rewiredをインストールする

npm install [email protected] --save-dev

2.プロジェクトルートディレクトリにconfig-overrides.jsファイルを作成して、デフォルトの設定を変更します.

/* config-overrides.js */

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}

3.package.json内の起動配置を修正する

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

プロファイルconfig-overrides.jsを設定します.
上の3ステップでwebpackの配置を拡張できます.次に必要に応じて配置すればいいです.私が使ったよくある構成を紹介します.
ES 7の修正器文法を有効にします.
cssモジュール化(参照リンク参照)エイリアスの設定ANtdは必要に応じてをロードする.
lessモジュール化および上書き変数

yarn add @babel/plugin-proposal-decorators    //   
yarn add codebandits/react-app-rewire-css-modules sass-loader node-sass    //css、sass   
yarn add babel-plugin-import   //antd    
yarn add react-app-rewire-less-modules  //less   

const { injectBabelPlugin } = require('react-app-rewired');
const rewireCssModules = require('react-app-rewire-css-modules');
const rewireLess = require('react-app-rewire-less-modules')
const path = require('path')

function resolve (dir) {
    return path.join(__dirname, '.', dir)
}


module.exports = function override(config, env) {
    // do stuff with the webpack config...

    //  ES7      （babel 7）
    config = injectBabelPlugin(['@babel/plugin-proposal-decorators', { "legacy": true }], config)   //{ "legacy": true }     ，    

    //css   
    config = rewireCssModules(config, env);

    //    
    config.resolve.alias = {
        '@': resolve('src')
    }

    //antd    
    config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }], config,);

	//less   
	config = rewireLess.withLoaderOptions({
	   javascriptEnabled: true,
	   modifyVars: {'@primary-color': '#1DA57A'},
	})(config, env)


    return config;
};

2018.12.24更新
今日creat-react-app文書を見たら、足場はcssモジュール化をサポートしています.追加の配置は必要ないです.cssモジュール化の使用方法は全部同じです[email protected]また、より高いバージョンでは、cssのみをサポートしています.less、stylasのモジュール化に似ていますか?それとも配置が必要ですか?)
209.1.21更新今日再構成する時、エラーが発生しました.原因は新しい[email protected]バージョンの関係です.react-app-rewiredは、すべての方法のinject BabelPluginを削除し、これらの方法は、customize-craという新しいパケットに移動する.解決策はreact-ap-rewiredを降格またはドキュメントごとに再構成することです.ここを参考にしてもいいです.
参照リンク:

@babel/plugin-proposal-decorators、修飾器

cssモジュール化のインストールと使用

別名を設定し、別名を設定した後、エディタがパスを提示しないソリューション

ANtdは必要に応じて

をロードします.