前言

继续昨天的文章，今天给大家讲下如果在服务器端代码出现问题了，应该怎么利用sourcemap进行断点调试，好了 不罗嗦了，小板凳摆好了马上开始了

1. 编写的代码

其实我们使用webpack内置的插件{SourceMapDevToolPlugin} 来指定sourcemap的访问地址，这个插件在webpack5之前是webpack.SourceMapDevToolPlugin,webpack5就是直接导出使用了。根据上图可以看到我们可以指定append的地址。利用插件{FileManagerPlugin}可以将生成的map文件复制到指定的目录下，删除生成的文件

2. 编译的结果

在生成的文件中 会出现sourcemap的映射地址

3. 模拟下服务器地址

这里 我把生成的js以及html复制到指定的目录下，使用插件http-server以此目录为基准，启动服务

4. map文件的服务地址

这个目录就是localhost:3000 下的地址

5. 断点调试

当你进行断点调试的时候 会自动映射的到这个源码文件的。(如果你最后不确定真实性，可以将3000端口关掉就不会映射了) 结尾：这个就是在服务器进行断点调试的过程，如果有疑惑欢迎大家留言