会React的人对create-react-app(下文简称CRA)这个脚手架一定不会陌生，这是react官方推出的一个脚手架。虽然在使用上很方便，但它的webpack配置却是固定的，并没有提供修改的入口，这点正是让人又爱又恨。虽然官方提供了eject这个命令可以弹出所有配置文件，但当你使用了这个命令后，后续如果想升级脚手架，又是一个头痛的问题。本文将介绍如何在不执行eject命令的前提下，拓展CRA的webpack配置。

一、官方支持的配置拓展点

a. CRA支持普通的css文件，同时也支持css module，只需要将css的后缀名命名为*.module.css，就能开启css module功能

b. CRA支持sass/scss语法，但默认没有引入sass组件，只需要安装node-sass这个包即可使用sass/scss功能（当然，也支持css module功能，只需要文件后缀名为*.module.scss/*.module.sass即可）

c. 调整eslint配置，CRA项目的package.json中会出现一个eslintConfig节点，这个节点就是react官方给我们提供的eslint配置修改的入口，其语法与.eslintrc文件是一致的

d. proxy，CRA内置了proxy功能，只需在package.json中添加"proxy":"http://xxx.xx.xx" 即可开启proxy功能

e. 修改项目启动端口，需要在更目录下新建一个.env文件，在.env文件中添加：PORT=3200 即可修改项目默认启动端口

f. 其他一些可修改的配置项，详见https://create-react-app.dev/docs/advanced-configuration

二、拓展webpack配置(通过react-app-rewired和customize-cra)

react-app-rewired是社区提供的一个修改CRA配置文件的组件，配合customize-cra，能便捷的修改CRA的配置文件，github地址：

react-app-rewired: https://github.com/timarney/react-app-rewired

customize-cra: https://github.com/arackaf/customize-cra

安装

yarn add react-app-rewired customize-cra

配置

1、在项目根目录添加config-overrides.js配置文件

/* config-overrides.js */

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}

2、修改项目启动命令

/* package.json */

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

这样最基础的配置就完成了，后续就能在config-overrides.js中修改webpack的配置了，例如：

/* config-overrides.js */

const {
  override,
  addDecoratorsLegacy,
  disableEsLint,
  addWebpackAlias,
  addLessLoader,
  addWebpackPlugin
} = require("customize-cra");
const path = require("path");
  
module.exports = override(
  // 启用装饰器模式
  addDecoratorsLegacy(),
  
  // 禁用eslint
  disableEsLint(),
  
  // 配置alias
  addWebpackAlias({
    ["@/components"]: path.resolve(__dirname, "src/components")
  }),

  // 添加less解析器
  ddLessLoader({
    modifyVars: themeVariables,
    javascriptEnabled: true,
    sourceMap: false,
  }),

  // 添加其他插件等
  addWebpackPlugin(xxx)
  
);

如果需要修改devServer的配置，可以将配置文件改写成这样：

/* config-overrides.js */

module.exports = {
  webpack: override(config, env){
    //do stuff with the webpack config...
    return config;
  },
  devServer: function(configFunction){
    return function(proxy, allowedHost){
      const config = configFunction(proxy, allowedHost);
      // add customer config here
      return config;
    }
  },
  paths: function(paths, env) {
    // add customer config here

    return paths;
  }
}

三、拓展webpack配置(通过craco)

craco是另一款类似react-app-rewired的功能，其使用配置也很简单

github：https://github.com/gsoft-inc/craco

安装

yarn add @craco/craco

配置

1、在项目根目录下添加craco.config.js配置文件

/* craco.config.js */

module.exports = {
  style: {
    //修改样式配置
  },
  eslint: {
    // 修改eslint配置，同.eslintrc
  },
  babel: {
    //babel配置，同.babelrc
  },
  plugins: [
  	//注入插件
  ],
  webpack: {
    configure: (config, { env, paths }) => {
      //修改webpack配置
      return config;
    }
  },
  devServer: (devServerConfig, { env, paths, proxy, allowedHost }) => {
    // 修改devServer配置
  	return devServerConfig;
  }
}

2、修改项目启动命令

/* package.json */

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

这样就配置完成了。

其他详细的配置可见：https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#configuration