首頁 >web前端 >js教程 >react設定檔路徑別名的具體方法你知道麼

react設定檔路徑別名的具體方法你知道麼

王林
王林轉載
2020-12-11 17:35:138752瀏覽

react設定檔路徑別名的具體方法你知道麼

文章環境:

「react」: “^16.13.1” 版本

學習影片分享:react影片教學

react官方腳手架預設是將webpack配置隱藏起來了,在進行配置之前需要將webpack給暴露出來。

1、輸入指令npm run eject

react設定檔路徑別名的具體方法你知道麼

#會出現一個指令提示:這是一個單向操作,確認操作後不可逆轉/回傳?

輸入 y 回車

成功之後在專案根目錄出現 config 資料夾

react設定檔路徑別名的具體方法你知道麼

2、開啟config 資料夾下的webpack. config.js 檔案

react設定檔路徑別名的具體方法你知道麼

3、進行搜尋alias ,大概在291 行的位置

react設定檔路徑別名的具體方法你知道麼

##參考如下格式,設定路徑別名

	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 檔案路徑

react設定檔路徑別名的具體方法你知道麼

##6、啟動項目, 無報錯,且樣式生效

react設定檔路徑別名的具體方法你知道麼

###

以上是react設定檔路徑別名的具體方法你知道麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除