React 08 :: Override Webpack

1,393 阅读3分钟

前言

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

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

gitlab.com/yafeya/reac…

1. 如何修改Webpack

create-react-app允许通过eject来获取对webpackfully control

yarn eject

image.png

执行了上面的命令之后会在项目下多出两个文件夹,configscripts

  • config 可以修改config文件件中的webpack.config.js来修改webpack的所有设置。
  • scripts 可以修改scripts文件夹中的build.js, start.jstest.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;
    },
    

    需要注意的是,由于修改了输出路径,所以之前的Dockerfile, nginx.conf, 和docker-exec文件也需要做出相应的修改。