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}
],
- 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編譯圖片需要主動加載(我們主動加載這個圖片才能被編譯到),同時你發現你的編譯路徑下已經編譯了改圖片。
以上僅爲本次搭建腳手架遇到問題,請多多指教謝謝。
未完待續…