creat-react-app扩展webpack配置 - react-app-rewiredreact脚手架create

背景

react脚手架create-react-app创建的项目，须在项目中增加一些webpack配置。

eject方式

npm run eject方式会将封装在 create-react-app 中的配置全部反编译到当前项目，将复制所有依赖文件和相应的依赖（webpack、babel等）到项目中，这样用户就能完全取得 webpack 文件的控制权，且它是单向操作，不可逆。但实际需求可能只需要修改一点点webpack配置，一大堆的文件让项目看上去似乎臃肿了很多。

使用react-app-rewired

除了这种方式，还有一个办法是使用react-app-rewired, 它可以在不eject, 也不创建额外react-scripts的情况下修改 create-react-app 内置的 webpack 配置，然后你将拥有 create-react-app 的一切特性，且可以根据你的需要去配置 webpack 的 plugins, loaders 等。

还可使用customize-cra，通过导入自定义cra函数和导出封装在override函数中的一些函数调用，你可以轻松地修改组成create-react-app的底层配置对象(webpack、webpack-dev-server、babel等)

使用步骤

安装react-app-rewired,customize-cra

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

在项目根目录下新建一个名称为config-overrides.js的文件

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

/* config-overrides.js */
module.exports = override(
  // 设置别名路径
  addWebpackAlias({ //路径别名
    '@': path.resolve(__dirname, 'src'),
  }),
  // 增加 less 支持
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      '@primary-color': '#1DA57A'
    }
  })
)

替换 package.json 中 scripts

/* 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"
}

启动 Dev Server

npm start

react-app-rewired：github.com/timarney/re…

customize-cra：github.com/arackaf/cus…