分享10：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编译图片需要主动加载（我们主动加载这个图片才能被编译到），同时你发现你的编译路径下已经编译了改图片。
在这里插入图片描述

以上仅为本次搭建脚手架遇到问题，请多多指教谢谢。

未完待续…

cc百川

发布了55 篇原创文章 · 获赞 29 · 访问量 5万+

私信关注

分享10：webpack脚手架搭建[问题汇总]

猜你喜欢