需求分析

最近在写前端埋点监控的错误监控，针对文件加载错误，如对script或者link标签的文件引入错误进行监控，并且上报，H5一般的写法如下：

正常逻辑是：在window上的error事件挂载事件，err.js资源不存在会引入失败，触发error事件，打印出事件详情，并上报，在正常的h5页面中是没有问题的，但是在webpack打包后，一直无法输出event事件

问题介绍

项目目录

通过webpack打包成monitor.js并在index.html中的head引入，因为monitor监控必须在错误文件引入之前引入，才能起到上报效果，这一点也没有什么问题

webpack.config

因为要把打包的js文件放置到head所以使用了html-webpack-plugin

问题分析

在经历了demo跑通，其他一切问题都排除的情况下，任然没有任何console结果和上报结果后，只能得出结论：monitor.js在某种不知名的情况下的引入顺序在error的资源标签之后，但是monitor.js是在头部引入的，执行顺序一定在err.js之前，在打包以后的index.html中，我最终得出了结果

在打包过程中加了defer标签，导致了异步加载，使得原本的script的加载顺序发生了改变

解决方法

webpack在从4=>5更新以后添加了scriptLoading属性。scripLoading有两个属性：'blocking' or 'defer',默认是defer属性，只需要追加blocking就可以解决了