creat-react-ap足場にwebpackを配置する方法

概要
creat-react-ap足場の中のreact-scriptsは(1)必要なwebpack依存を自動的にダウンロードしてくれます.(2)自分でnodejsサーバーのスクリプトコードを書きました.(3)expressのHttpサーバを使用する;(4)設定ファイルを隠してくれました.
もし私達が追加的にwebpackを配置する必要があったらどうすればいいですか?例えばmdを追加するloader.
今後の開発の参考にするために、他の人にも役立つと信じている2つの方法をまとめました.
方法1
次のコマンドを実行すると設定ファイルを表示できます.

npm run eject
//    Y

入力した後にプロジェクトのディレクトリはもう一つのcongfigフォルダができます.中にはwebpackの配置ファイルがあります.
しかし、この過程は可逆的ではないので、はっきりと現れたら、もう隠しきれなくなります.
方法2
(babelプラグインを修正して、必要に応じてantdをロードすることを実現します.他の構成を修正して、この方法を真似してもいいです.)
(1)react-ap-rewired(creat-react-apをカスタマイズしたコミュニティソリューション)とBabel-plugin-mport(babelの管理ローディングプラグイン)を使用する.

$ yarn add react-app-rewired --dev
$ yarn add babel-plugin-import --dev

//    npm
npm install react-app-rewired --dev
npm install babel-plugin-import --dev

(2)package.jsonにおける起動配置を修正する.

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

(3)プロジェクトのルートディレクトリでconfig-overrides.jsを作成し、デフォルトの設定を変更します.

/* config-overrides.js */
const { injectBabelPlugin } = require('react-app-rewired');

module.exports = function override(config, env) {
    config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
    return config;
  };

転載先:https://www.cnblogs.com/yangzhou33/p/8480140.html