create-react-app 创建项目更改webpack配置

前言

使用create-react-app创建的项目webpack配置文件是隐藏起来的，如果想要把配置暴露出来更改，需要运行 npm run eject 命令。
不过这种方法有两个缺点：

• npm run eject命名不可逆，一旦配置文件暴露后就不可再隐藏；
• 扩展的配置和create-react-app内建的webpack配置混合在了一起，不利于配置出现问题后的排查。

注意：还有craco也可做create-react-app 项目的webpack配置扩展，但是craco启动项目太慢了，放弃了~

react-app-rewired介绍

使用react-app-rewired这个npm包可以让我们在不改create-react-app本身的配置基础上去扩展配置，是个非常nice的工具。

使用

1）安装

npm安装：

npm install customize-cra react-app-rewired --save-dev

yarn安装：

yarn add customize-cra react-app-rewired -D

2）在根目录中创建一个 config-overrides.js 文件

3) 修改 package.json 里的启动配置

注意：不用替换 eject 部分。工具中没有针对 eject 的配置替换，执行了 eject 命令会让工具失去作用。

  /* 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 --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
}

4) 配置config-overrides.js

• 启用ES7的修改器语法（babel 7）
• 配置别名

yarn add @babel/plugin-proposal-decorators  // 修饰器

/* config-overrides.js */
const path = require('path')
const { override, addDecoratorsLegacy, addWebpackAlias } = require('customize-cra')

function resolve(dir) {
  return path.join(__dirname, '.', dir)
}

module.exports = override(
  // 装饰器
  addDecoratorsLegacy(),
  addWebpackAlias({
    '@': resolve('src'),
    '@comps': resolve('src/components'),
    '@style': resolve('src/assets/style'),
    '@images': resolve('src/assets/images'),
    '@pages': resolve('src/pages'),
  })
)

运行

yarn run start