webpack的配置

首先，我们安装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',

+  }),

+ );

这样我们在组件中就可以按需引入组件库中所需要的组件了。

2、自定义主题

按照配置主题的要求，自定义主题需要用到 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文件