關於最新create-react-app使用react-app-rewired2.x添加webpack配置

使用過create-react-app（如下簡稱cra）的朋友都知道，這是react官方的一款腳手架工具，內部集成了babel，webpack，webpack-dev-server等等。

之前咱們要在cra中作webpack的配置，有三種方式：

一、運行npm run eject獲得原始的webpack配置文件config，而後能夠看到裏面有prod和dev兩個環境的相關配置；可是新版本cra你run eject以後，只有一個webpack.config.js文件了。

能夠在這裏面進行配置。可是本文中這不是咱們推薦的方式。

二、不run eject。而是改寫script文件中的js。這個本人沒有操做過，這個就不詳談了。

三、使用react-app-rewired，安裝這個工具後，在項目根目錄中新建文件config-overrides.js文件。此時咱們即可以在其中進行各類webpack的騷操做了~

可是！react-app-rewired2.x之後，再也不支持injectBabelPlugin的方式，須要安裝customize-cra。

具體的，ant design官方文檔已經給出了最新的解決方案。請前往詳覽。https://ant.design/docs/react/use-with-create-react-app-cn

這種方式就是咱們推薦的方式。由於無需生成更多額外的文件，同時配置又趨於更簡單可控的方式。

接下來咱們就來具體說一下操做步驟。

首先，咱們安裝react-app-rewired。

$ yarn add react-app-rewired

而後修改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",
}

接着，安裝customize-cra

$ yarn add customize-cra

而後在根目錄下添加config-overrides.js文件。

module.exports = function override(config, env) {
  // 關於webpack的相關配置
  return config;
};

好了，基本的操做就是這樣。下面咱們再來講具體到咱們的項目中，須要作的一些配置。

一、react項目中咱們最經常使用的組件庫antd，咱們須要配置按需加載。

使用babel-plugin-import，它是一個用於按需加載組件代碼和樣式的 babel 插件。

安裝

$ yarn add babel-plugin-import

接着配置webpack 

/* config-overrides.js */
+ const { override, fixBabelImports } = require('customize-cra');

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

這樣咱們在組件中就能夠按需引入組件庫中所須要的組件了。

二、自定義主題

按照配置主題的要求，自定義主題須要用到 less 變量覆蓋功能。

安裝less和less-loader

$ yarn add less less-loader

配置webpack

/* config-overrides.js */
- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
-   style: 'css',
+   style: true,
  }),
+ addLessLoader({
+   javascriptEnabled: true,
+   modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);

這裏利用了less-loader的modifyVars來進行主題配置。固然這裏的modifyVars的值也能夠是一個theme文件。

三、打包後咱們會發現靜態文件夾中會有不少的css和js的map文件，那麼咱們該怎麼關閉sourcemap呢？

/* config-overrides.js */

const { override, fixBabelImports, addLessLoader } = require("customize-cra");

+ process.env.GENERATE_SOURCEMAP = "false";

module.exports = override(
  fixBabelImports("import", {
    libraryName: 'antd',
    libraryDirectory: "es",
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' },
  })
);

ok，再次執行npm run build便不會產生map文件了。

還看到一種解決的方式以下，

const rewiredMap = () => config => {
    config.devtool = config.mode === 'development' ? 'cheap-module-source-map' : false;
    return config;
};

module.exports = override(
    // 關閉mapSource
    rewiredMap()
);

參考地址：https://segmentfault.com/q/1010000018123194

四、最後咱們來講說前端本地proxy的配置

開發中常見的問題就是跨域。那麼咱們前端慣用的方式就是給本地webpack啓動的node服務設置代理。

那麼具體到使用了新版的cra後，咱們該怎麼辦呢？

很簡單，在src目錄下新建文件setupProxy.js（注意文件名必定要是這個名字，不要問什麼，cra如今廢棄了proxy對象配置的方式，將其做爲單獨模塊。解析就是按 src/setupProxy.js這個路徑）

安裝http代理相關包http-proxy-middleware

$ yarn add http-proxy-middleware -D

配置以下，

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy('/api', {
      target: 'http://xx.xx.xx.xx:8000/',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    })
  )
}

好了，如今你就能夠愉快的訪問接口了~

關於更多的customize-cra配置，你們能夠自行查看文檔。https://github.com/arackaf/customize-cra