How to quickly set the file path alias in react

React is a JavaScript library for building user interfaces. It originated from an internal project of Facebook. Because the company was dissatisfied with all the JavaScript MVC frameworks on the market, it decided to write its own one to build the Instagram website. After it was developed, we found that this system was very useful, so we opened it to the public in May 2013.

React is a JAVASCRIPT library for building user interfaces.

React is mainly used to build UI, and many people think that React is the V (view) in MVC.

React originated as an internal project at Facebook, used to build Instagram's website, and was open sourced in May 2013.

React has high performance and very simple code logic, and more and more people have begun to pay attention to and use it.

Since webpack hides the configuration file, it needs to be exposed first. After entering the project directory, run the following code in cmd

npm run eject 

Are you sure you want to log out? This behavior is permanent.
Enter y and press Enter. After the run is completed, find the config folder in the project folder.

Open webpack.config.js

Press Ctrl+f to search for alias and find the configuration item

Configure the mapping, you can refer to the following configuration

alias: {
        "react-native": "react-native-web",
        ...(isEnvProductionProfile && {
          "react-dom$": "react-dom/profiling",
          "scheduler/tracing": "scheduler/tracing-profiling",
        }),
        ...(modules.webpackAliases || {}),
        // Configuration file alias, the alias is on the left and the corresponding path is on the right "@": path.resolve(__dirname, "../src"),
        "@scss": path.resolve(__dirname, "../src/assets/scss"),
        "@images": path.resolve(__dirname, "../src/assets/images"),
        "@views": path.resolve(__dirname, "../src/views"),
        "@components": path.resolve(__dirname, "../src/components"),
      },

After the configuration is complete, just restart the project.

This is the end of this article on how to quickly set file path aliases in react. For more relevant react file path aliases, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!