create-react-app腳手架中配置webpack的方法

標籤：cti   https   reac   rip   總結   tor   tar   ant   run   

概述

create-react-app腳手架中的react-scripts能夠(1)幫我們自動下載需要的webpack依賴；(2)自己寫了一個nodejs服務端指令碼代碼；(3)使用express的Http伺服器；(4)並幫我們隱藏了設定檔。

那麼假如我們需要額外配置webpack該怎麼辦呢？比如添加md的loader。

我總結了2種方法，供以後開發時參考，相信對其他人也有用。

方法一

運行如下命令即可把設定檔顯示出來：

npm run eject//然後輸入Y

輸入後項目目錄會多出一個congfig檔案夾，裡面就有webpack的設定檔。

但是此過程無法復原，所以顯現回來後就不能再隱藏回去了。

方法二

(以修改babel外掛程式實現按需載入antd為例，修改其它配置可以仿照這個方法來做。)

(1)使用 react-app-rewired （一個對 create-react-app 進行自訂配置的社區解決方案）和babel-plugin-import（一個babel的管理載入的外掛程式）。

$ yarn add react-app-rewired --dev$ yarn add babel-plugin-import --dev//或者使用npmnpm install react-app-rewired --devnpm 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;  };

create-react-app腳手架中配置webpack的方法