在CRA中自定义webpack

在create-react-app中想要自定义修改webpack有两种方式:eject和不使用eject的其他方式。

使用eject

eject 命令执行后会将封装在 create-react-app 中的配置全部反编译到当前项目，这样用户就能完全取得 webpack 文件的控制权。

npm run eject 会复制所有依赖文件和相应的依赖（webpack、babel等）到你的项目。是单向操作，eject后就回不去了。

使用方法：在新建的cra应用中直接npm run eject。

tips：我在第一次这样做的时候遇到了下面这个问题

create-react-app eject暴露配置时出现“Remove untracked files, stash or commit any changes, and try again.”错误

问题产生原因：

脚手架创建项目产生gitignore，本地无文件仓库

解决方案如下

git add .

git commit -am "Save before ejecting"

问题解决

再次运行npm run eject现在就可以看到隐藏的配置文件了

---

不使用eject

customize-cra配置

customize-cra利用react-app-rewired的config-overrides.js文件。通过导入customize-cra功能和出口几个函数调用包在我们的override功能，

可以很容易地修改底层配置对象（webpack，webpack-dev-server，babel等）组成create-react-app。

https://github.com/arackaf/customize-cra#using-the-plugins

使用方法：

1、安装

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

2、修改package.json

"scripts": {

    "start": "react-app-rewired start",

    "build": "react-app-rewired build",

    "test": "react-app-rewired test --env=jsdom",

    "eject": "react-scripts eject"

  },

3、在根目录新建config-overrides.js

const { override } = require('customize-cra');
module.exports = {};

4、进行配置

//配置less
module.exports = override(    
    addLessLoader({        
        javascriptEnabled: true,        
        modifyVars: { 
            '@primary-color': '#1DA57A' 
        }    
    })
);