1. 程式人生 > 實用技巧 >react配置 src 根路徑

react配置 src 根路徑

前提:react配置匯入根路徑需要在webpack中配置,但使用腳手架建立的專案,預設將babelwebpack等內容全部封裝到react-scripts中,所以在這種狀態下沒有辦法更改webpack中的內容

需要執行npm run eject解開react-scripts

  • npm run eject命令無法撤銷
  • 執行後,會出現configscripts兩個資料夾

方法:在新出現的config資料夾中,找到webpack.config.js檔案,在alias中插入'@': path.resolve('src'),/或者'@':path.join(__dirname,'../src'), 就可以了

 1 alias: {
 2         '@': path.resolve('src'),
 3         // '@':path.join(__dirname,'../src'),
 4         // Support React Native Web
 5         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 6         'react-native': 'react-native-web',
 7         // Allows for better profiling with ReactDevTools
8 ...(isEnvProductionProfile && { 9 'react-dom$': 'react-dom/profiling', 10 'scheduler/tracing': 'scheduler/tracing-profiling', 11 }), 12 ...(modules.webpackAliases || {}), 13 },