background

Create-react-app creates projects that need to be configured with webPack.

Eject way

NPM run ject decompiles all the configuration encapsulated in create-react-app into the current project, copies all dependency files and their corresponding dependencies (webpack, Babel, etc.) into the project, and gives the user full control over the webpack file. And it’s a one-way operation. It’s irreversible. But the actual requirements may require only a few changes to the WebPack configuration, and the large number of files makes the project seem bloated.

Use the react – app – rewired

An alternative to this approach is to use react-app-rewired, which can modify the create-React-app built-in Webpack configuration without eject or creating additional react-scripts. You will then have all the features of create-React-app and can configure webPack plugins, loaders, and so on to suit your needs.

You can also use customize-cra by importing custom CRA functions and exporting some function calls encapsulated in the Override function, You can easily modify the underlying configuration objects that make up create-react-app (webpack, webpack-dev-server, Babel, etc.)

Using the step

  1. The installationreact-app-rewired.customize-cra
npm install react-app-rewired --save-dev
npm install customize-cra --save-dev
Copy the code
  1. Create a new one under the project root directory namedconfig-overrides.jsThe file
/* config-overrides.js */
const path = require('path')
const { override, addWebpackAlias, addLessLoader } = require('customize-cra');

/* config-overrides.js */
module.exports = override(
  // Set the alias path
  addWebpackAlias({ // Path alias
    The '@': path.resolve(__dirname, 'src'),}),// Add less support
  addLessLoader({
    javascriptEnabled: true.modifyVars: {
      '@primary-color': '#1DA57A'}}))Copy the code
  1. replacepackage.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"
}
Copy the code
  1. Start the Dev Server
npm start
Copy the code

React-app-rewired:github.com/timarney/re…

Customize-cra:github.com/arackaf/cus…