create-react-app配置别名和装饰器并使用

create-react-app为我们封装好了webpack并且隐藏了起来，而日常开发中我们想修改webpack配置别名和装饰器该如何操作呢？

1.安装customize-cra和react-app-rewired

yarn add customize-cra react-app-rewired

2. 根目录创建config-overrides.js并安装装饰器插件@babel/plugin-proposal-decorators

 yarn add @babel/plugin-proposal-decorators

// config-overrides.js

const {override, addDecoratorsLegacy, addWebpackAlias} = require('customize-cra')
const path = require('path')

module.exports = override(
    addDecoratorsLegacy(), // 配置装饰器
    addWebpackAlias({
        ["@"]: path.resolve(__dirname, "src")
    }), // 配置别名
)

3.修改package.json配置 添加dev启动

"start": "react-scripts start", // 默认启动命令
"dev": "react-app-rewired start", // 添加新的启动命令

4.重新执行 npm run dev 执行项目，配置就生效啦。