react 設置文件路徑別名

前言

本文基於 (“react”: “^16.13.1”) 版本
react官方腳手架默認是將webpack配置隱藏起來了，在進行配置之前需要將webpack給暴露出來。

1.輸入命令 npm run eject

會出現一個命令提示：這是一個單向操作，確認操作後不可逆轉/返回?
輸入 y 回車
成功之後 在項目根目錄出現 config 文件夾

2.打開 config 文件夾下的 webpack.config.js 文件

3.進行搜索 alias ,大概在 291 行的位置

4.參照如下格式，設置路徑別名

	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'),
      },

需要特別注意的是： webpack配置進行改動後，都需要重新啓動項目，不然不生效

5.在項目中使用
打開 index.js ,將 import ./index.css 替換成 import '@/index.css’
注： @ 在上面已經被設置 src 文件路徑

6.啓動項目， 無報錯，並且樣式生效