New Git knowledge repositoryFront end from entry to groundFor attention, star and collation needs, update from time to time ~

We usually use create-creact-app to quickly create projects. For small projects, we can quickly develop and deploy without any modifications. But for some projects, it is inevitable that some configuration needs to be added to webpack.

To manually modify the configuration, you can perform the following operations:

  1. runnpm run ejectPop up the configuration and get the original WebPack configuration file config. This process is irreversible. If you have a lot of customization, build your own shelf.
  2. Overwrite js in script files. This is not covered in this article.
  3. Use a third-party tool to change the password.react-app-rewiredCan be used to help rewrite the React scaffolding configuration.

React-app-rewired eliminates the need to generate additional files, while configuration tends to be simpler and more manageable.

Download and install

The [email protected] version requires customize-cra.

yarn add customize-cra react-app-rewired --dev
Copy the code

Create a new config-overrides. Js file in the root directory, the same as package.json.

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config
}
Copy the code

Customize-cra utilizes the config-overrides. Js file of react-app-rewired. You can easily modify the underlying configuration objects (webpack, webpack-dev-server, Babel, etc.) by configuring the functions in customize-cra in Override.

Modify the startup script in package.json file

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

Configuration of the sample

For the customize-cra supported functions, see the customize-cra function documentation

  • Use ES7 decorators
/* config-overrides.js */
const {
  override,
  addDecoratorsLegacy
} = require('customize-cra')

module.exports = override(
  // enable legacy decorators babel plugin
  addDecoratorsLegacy(),
)
Copy the code
  • Use Less

Install less and less-loader

yarn add  less less-loader --dev
Copy the code

Changing a Configuration File

const {
  override,
  // ...
  addLessLoader,
  // ...
} = require('customize-cra')

module.exports = override(
  // ...
  // less
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      // Optionally adjust URLs to be relative. When false, URLs are already relative to the entry less file.
      relativeUrls: false,
      modifyVars: { '@primary-color': '#A80000' },
      // cssModules: {
      //   // if you use CSS Modules, and custom `localIdentName`, default is '[local]--[hash:base64:5]'.
      //   localIdentName: "[path][name]__[local]--[hash:base64:5]",
      // }
    } 
  })
  // ...
)
Copy the code

ModifyVars of less-Loader is used for theme configuration. Of course, the modifyVars value can also be a theme file.

  • Add an alias
const { override, // ... addWebpackAlias } = require('customize-cra') const path = require('path') module.exports = override( // ... // Path alias addWebpackAlias({'@': path.resolve(__dirname, 'SRC ')})Copy the code
  • Close the sourcemap
const rewiredMap = () => config => { config.devtool = config.mode === 'development' ? 'cheap-module-source-map' : false; return config; }; Module.exports = override(// disable mapSource rewiredMap());Copy the code

reading

  • React Fiber is not fully explained
  • React hook

Reference documentation

  1. The react – app – rewired
  2. For the latest create-react-app use react-app-rewired2.x to add webPack configuration
  3. react-app-rewired