Blog Entry

CRA中无eject修改配置

Created: 2022/02/08
Updated: 2022/02/08

react

前言

CRA封装了大量配置,降低学习成本.

有时候又不得不自定义一些配置,特别是只修改了一点点,这时候官方的推荐做法就是eject,但这毕竟是个单向操作,eject之后就回不去了,并且会有一些其他的影响,要想消除这些影响,势必又是成为”配置侠”的艰苦旅途.

一番搜索,虽然官方没有这方面的解决方案,但是社区有啊,比如:

根据标星数和项目活跃度,这里选用react-app-rewired来作为测试对象

react-app-rewired

试验项目

使用Create React App新建项目:

npx create-react-app of-react-app-rewired
cd of-react-app-rewired
yarn

引入react-app-rewired

yarn add -D react-app-rewired

建立配置文件config-overrides.js(用于覆盖CRA配置)

/* config-overrides.js */

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

修改脚本

  "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",
    "eject": "react-scripts eject"
}

react-app-rewired 配置

可以修改的配置有很多,这里只改下webpack配置做个简单的测试

sourcemap文件的配置默认为[file].map,修改为sourcemaps/[file].map

/* config-overrides.js */
module.exports = {
  webpack: function(config, env) {
    // 默认
    // config.output.sourceMapFilename: "[file].map", // string

    // 修改后
    config.output.sourceMapFilename = "sourcemaps/[file].map";
    return config;
  }
}

yarn build之后,生成文件存放于build目录,此时所有的sourcemap文件都集中在build/sourcemap文件夹,说明配置覆盖成功了

前言

react-app-rewired

react-app-rewired 配置

资料