前言

使用create-react-app创建的react项目，默认隐藏了对webpack的控制，但是有的时候我们有需要去改写一些对于webpack的设置，这是就需要对webpack的设置进行override，在这篇文章中，我会给大家介绍两种修改webpack设置的方法。

话不多说，还是先来share一下本篇文章的repo:

gitlab.com/yafeya/reac…

1. 如何修改Webpack

create-react-app允许通过eject来获取对webpack的fully control。

yarn eject
复制代码

执行了上面的命令之后会在项目下多出两个文件夹，config和scripts。

config

可以修改config文件件中的webpack.config.js来修改webpack的所有设置。

scripts

可以修改scripts文件夹中的build.js, start.js与test.js来修改react-script的逻辑。

`eject`的劣势

eject操作是不可逆的，也就是说，eject之后所有的通过create-react-app管理的配置，现在都交由你自己控制，对于新手来说是个灾难，而且，在你执行eject过程中，create-react-app也会反复提醒你是否真的要eject，而且默认选项是false。

其实对于我这样的新手来说，最好的方式是，给我一个override的入口，我只修改我想要的地方，其他的我不动，还是交给框架来帮我打理。

然鹅，有没有这样的工具呢？答案是肯定的，可以使用react-app-rewired。

2. 使用`react-app-rewired`

react-app-rewired的官方文档上面做出了如下的说明，鹅且是中文的呦！

此工具可以在不 ‘eject’ 也不创建额外 react-scripts 的情况下修改 create-react-app 内置的 webpack 配置，然后你将拥有 create-react-app 的一切特性，且可以根据你的需要去配置 webpack 的 plugins, loaders 等。

2.1 安装

npm i -D react-app-rewired
复制代码

2.2 在根目录下，创建`config-overrides.js`

修改文件为以下的内容:

// config-overrides.js
module.exports = {
    webpack: function (config, env) {
      return config;
    },
    jest: function (config) {
      return config;
    },
    devServer: function (configFunction) {
        return function (proxy, allowedHost) {
            return config;
        };
    },
    paths: function (paths, env) {
      return paths;
    },
}

作者：yafeya
链接：https://juejin.cn/post/6967750797786349599
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
复制代码

2.3 修改`package.json -> scripts`

修改package.json中的scripts节点，使用react-app-rewired代替react-scripts。只修改start, build, 和test, 这样就能在执行者写命令的时候应用override的功能了。

{
    # ...
    "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test",
        "eject": "react-scripts eject"
    }
    # ...
}
复制代码

2.4 使用`react-app-rewired`案例

可访问Fallback URL

在之前讲Router的那片文章的时候，我们已经讲过了，如果希望在routing的页面直接刷新的话，会返回404错误，这是因为，React是一个SPA，其实routing的页面是不存在的，需要修改Webpack设置，将historyApiFallback设置为true。

我们可以通过react-app-rewired来修改。
```
devServer: function (configFunction) {
    return function (proxy, allowedHost) {
        const config = configFunction(proxy, allowedHost);
        config.disableHostCheck = true;
        config.historyApiFallback = true;
        return config;
    };
},
复制代码
```

修改输出路径
create-react-app在执行yarn build后默认的输出路径为build, 但是，我个人比较习惯dist。这个也是可以通过react-app-rewired修改的。

webpack: function (config, env) {
    // configure to dist
    const path = require('path');
    const paths = require('react-scripts/config/paths');
    paths.appBuild = path.join(path.dirname(paths.appBuild), 'dist');
    config.output.path = path.join(path.dirname(config.output.path), 'dist');
    return config;
},
复制代码