preface

The react project created using create-react-app hides webpack control by default. However, sometimes we need to override webpack Settings. I’ll show you two ways to modify webPack Settings.

Without further ado, let’s share the repo for this article:

Gitlab.com/yafeya/reac…

1. How do I modify Webpack

Create-react-app allows you to get fully control of the Webpack via eject.

yarn eject
Copy the code

Executing the above command will create two more folders under the project, config and scripts.

  • config

You can modify all the Settings for webpack by modifying webpack.config.js in the config file.

  • scripts

You can modify the logic of react-script by modifying build.js, start.js, and test.js in the scripts folder.

ejectThe disadvantage of

Eject is irreversible, which means that after Eject all configuration managed by create-React-app is now under your control, which is a disaster for beginners, and while you’re doing Eject, Create-react-app will also repeatedly remind you if you really want to eject, and the default option is false.

In fact, for a novice like me, the best way is to give me a override entry, I only change the places I want, AND I leave the rest untouched and let the framework handle it for me.

But goose, is there such a tool? The answer is yes, you can use react-app-rewired.

2. Usereact-app-rewired

The react-app-Rewired document states the following, in Chinese!

This tool can modify the built-in webpack configuration of create-React-app without ‘eject’ or creating additional react-scripts, and then you’ll have all the features of create-React-app, And you can configure webpack plugins, loaders, and so on according to your needs.

2.1 installation

npm i -D react-app-rewired
Copy the code

2.2 Create a vm in the root directoryconfig-overrides.js

Modify the file to the following content:

// 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) {
      returnpaths; },} By Yafeya link: HTTPS://juejin.cn/post/6967750797786349599The copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.Copy the code

2.3 to modifypackage.json -> scripts

Modify the scripts node in package.json to use react-app-rewired instead of react-scripts. Change only start, build, and test so that override is applied when the executor writes the command.

{#..."scripts": {
        "start": "react-app-rewired start"."build": "react-app-rewired build"."test": "react-app-rewired test"."eject": "react-scripts eject"} #... }Copy the code

2.4 the use ofreact-app-rewiredcase

  • The Fallback URL is accessible

    In the previous article about Router, if you want to refresh the routing page directly, a 404 error will be returned. This is because React is a SPA. In fact, the routing page does not exist, so you need to modify the Webpack setting. Set historyApiFallback to true.

    We can do this with react-app-rewired.

    devServer: function (configFunction) {
    return function (proxy, allowedHost) {
        const config = configFunction(proxy, allowedHost);
        config.disableHostCheck = true;
        config.historyApiFallback = true;
        return config;
    };
},
Copy the code

  • After yarn Build is executed, the default output path of create-react-app is build. However, I am used to dist. This can also be modified via 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;
},
Copy the code

    Note that the previous Dockerfile, nginx.conf, and docker-exec files also need to be modified as the output path is changed.