customize-cra覆盖create-react-app webpack配置

create-react-app的配置已经够完美了，开箱即用，但是我又想修改一些webpack配置，官方的建议做法是yarn run eject将webpack配置暴露出来，但是我又不想做webpack配置工程师，在github找了一圈发现了用react-app-rewired+customize-cra搭配使用可以简单的覆盖cra的webpack配置。

安装依赖

首先安装依赖：

yarn install react-app-rewired customize-cra --dev

修改package.json

再修改一下package.json，将原本react-scripts启动的三个脚本修改为由react-app-rewired启动：

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

创建config-overrides.js

在项目根目录下创建文件config-overrides.js:

const { override, fixBabelImports, addWebpackAlias } = require('customize-cra');
const path = require('path');
const resolve = dir => path.join(__dirname, dir);

module.exports = override(
  // antd 按需加载
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
  // 配置路径别名
  addWebpackAlias({
    '@': resolve('src'),
  }),
  // 关闭生产环境下打包生成map文件
  config => {
    if (process.env.NODE_ENV === 'production') {
      config.devtool = false;
    }
    return config;
  },
);

antd按需引入

在使用fixBabelImports这个函数配置antd按需引入的同时，还需安装依赖babel-plugin-import，运行yarn add babel-plugin-import --dev。

配置路径别名

此外为了使vscode对模块引入的代码提示识别，需要再修改tsconfig.json，但是直接附加在tsconfig.json上的内容由react-scripts启动时会被清空，这里没办法只能用折衷的方法解决，修改tsconfig.json在最后附加：

{
  "extends": "./tsconfig.paths.json"
}

如你所见，我们打算用引入配置文件的方式来额外添加tsconfig配置，在项目根目录下额外创建文件tsconfig.paths.json：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

大功告成，现在我们就可以使用@/components/SomeComponent这样的导入语句来实现根据项目根目录的导入了。

customize-cra还有很多额外可以只需简单书写就可以覆盖webpack配置的办法，详细请转。