create-react-app創建項目修改配置項的兩種方法

方法一：eject

　　打開 package.json ，可以看到eject。運行 npm run eject 可以讓由create-react-app創建的項目的配置項暴露出來。

{
  ...
  "scripts": {
   ...
    "eject": "react-scripts eject"
  },
  ...
}

　　運行npm run eject ,此時，項目中多了一個config文件，並且各個配置文件已經暴露出來了。(運行npm run eject之前，保證本地沒有待提交到git的文件)

　　但是這種方法不可逆。

方法二：react-app-rewired

　  安裝react-app-rewired

npm install react-app-rewired --save

　　修改package.json,原本的react-script 改為react-app-rewired　　

 

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

 

　　在根目錄下新建config-overrides.js,在config-overrides.js里更改配置項，項目啟動的時候會先在config-overrides.js里讀數據，對webpack里的默認文件進行整合，最后才會啟動。

const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
    config = injectBabelPlugin([
        'import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }
    ], config)
    config = injectBabelPlugin([
        "@babel/plugin-proposal-decorators", { "legacy": true }
    ], config)
    return config;
}