Home > Web Front-end > JS Tutorial > Do you know the specific method of setting file path alias in react?

Do you know the specific method of setting file path alias in react?

王林
Release: 2020-12-11 17:35:13
forward
8719 people have browsed it

Do you know the specific method of setting file path alias in react?

Article environment:

"react": "^16.13.1" Version

Learning video sharing:react video tutorial

The react official scaffolding hides the webpack configuration by default. Webpack needs to be exposed before configuration.

1. Enter the command npm run eject

Do you know the specific method of setting file path alias in react?

# and a command prompt will appear: This is a one-way operation and cannot be reversed/returned after confirming the operation?

Enter y and press Enter

After success, the config folder will appear in the project root directory

Do you know the specific method of setting file path alias in react?

2. Open webpack under the config folder. config.js file

Do you know the specific method of setting file path alias in react?

3. Search for alias, probably at line 291

Do you know the specific method of setting file path alias in react?

##Refer to the following format, When setting the path alias

	alias: {
        // Support react Native Web
        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        'react-native': 'react-native-web',
        // Allows for better profiling with reactDevTools
        ...(isEnvProductionProfile && {
          'react-dom$': 'react-dom/profiling',
          'scheduler/tracing': 'scheduler/tracing-profiling',
        }),
        ...(modules.webpackAliases || {}),
        // 文件路径别名
        '@': path.resolve(__dirname, '../src'),
        '@view': path.resolve(__dirname, '../src/view'),
      },
Copy after login

, special attention should be paid to: After changing the webpack configuration, you need to restart the project, otherwise it will not take effect

5. Use

to open it in the project index.js, replace import ./index.css with import '@/index.css'

Note: @ has been set above src file path

Do you know the specific method of setting file path alias in react?

6. Start the project, no error is reported, and the style takes effect

Do you know the specific method of setting file path alias in react?

The above is the detailed content of Do you know the specific method of setting file path alias in react?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template