分享10:webpack腳手架搭建[問題彙總]

webpack搭建腳手架見:分享9:webpack腳手架搭建

使用webpack搭建腳手架過程中遇到的問題:

1. Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled (4:1):【總體來說就註解【裝飾符】是實驗語法不支持】

在這裏插入圖片描述
解決:下載相關插件包,並在webpack.config.js中配置

 [
     "@babel/plugin-proposal-decorators",//支持裝飾器的方式
     { "legacy": true}
 ],
  1. Support for the experimental syntax ‘classProperties’ isn’t currently enabled (6:24):【習慣了class的語法格式,目前實驗語法不被支持】

在這裏插入圖片描述
解決:圖中有說到需要下載支持class語法的依賴

[
	"@babel/plugin-proposal-class-properties",//支持class的語法
     { "loose": true }
 ]

3.mobx-react.module.js:1 Mobx observer: You are trying to use ‘observer’ on a component that already has ‘inject’. Please apply
‘observer’ before applying ‘inject’【警告大概意思是先注入在觀察(其實也很好理解,你需要知道你觀察什麼)】

在這裏插入圖片描述
解決:調整順序
在這裏插入圖片描述

4:配置在debug模式也就是熱部署模式下,展示當前模塊所有路由,並且點擊路由跳轉到對應組件。主頁面空白問題

在這裏插入圖片描述
問題代碼:產生問題是,我只是在左側添加了顯示路由部分,而點擊路由對應的頁面沒有顯示,路由debug中已跳轉
在這裏插入圖片描述
解決:這裏我們看到我的這一塊代碼的根路由中添加了home那麼children則顯示的是下面的所有路由。需要把這些路由頁面也通過home顯示,即直接展示所有chilren【好處是在模塊開發模式下,更便利的瀏覽當前模塊的所有路由】
在這裏插入圖片描述

5:圖片加載問題

在這裏插入圖片描述
想法是我已經使用了url-loader、file-loader處理圖片就沒有什麼問題直接給了我當前文件相對路徑,你會發現圖片已經在對應路徑下找不到了,同時你發現也不是你編譯前的路徑了,給絕對路徑也不行。
解決:url-loader/file-loader編譯圖片需要主動加載(我們主動加載這個圖片才能被編譯到),同時你發現你的編譯路徑下已經編譯了改圖片。
在這裏插入圖片描述


以上僅爲本次搭建腳手架遇到問題,請多多指教謝謝。

未完待續…

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章