html-webpack-plugin 又出幺蛾子 | 一次解决bug的过程

背景介绍

先说一下这一次出现问题的需求背景，在顺便引出 html-webpack-plugin。最近在做监控，而我需要监控到文件加载错误，并实现上报。熟悉的小伙伴，已经知道，这是一个很容易实现的功能

 <script>
   window.addEventListener('error', function(event) {
      console.log(event)
    },true)
  </script>
  <script src="cutex/xuan.js"></script>

当我们加载 cutex/xuan.js 这个文件的时候，加载失败，报告404错误。这个时候，我们就可以在 addEventListener 中监听到这个错误，并实现上报。

这个demo，我已经跑通了，但是我在本地搭建webpack环境，并将代码扔到封装好的监控文件中，却这么也不行…

详情描述

正常逻辑下，我封装了监控文件 monitor ，项目结构如下：

同时呢，我在webpack的配置如下：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: "./src/index.js",
    mode: "development",
    output: {
        path: path.resolve(__dirname,"dist"),
        filename: "monitor.js"
    },
    devServer: {
        contentBase: path.resolve(__dirname,'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            inject: 'head'
        })
    ]
}

正常逻辑，我的entry入口，指向了引入 monitor 的js，同时，我们引入html-webpack-plugin 以 index.html 为模版打包，同时也指向了入口文件的打包位置 inject: ‘head’。

解决过程

周五下午发现的这个问题，一直没有解决。想着是周五，也就没有太用心解决他。晚上睡觉前，想着看个电影睡觉，但是突然想起来这个事情。于是乎，起床，拿电脑，开机，完美解决，同时大半夜写了个周报。

1、本地的demo可以跑通，但是扔到webpack中，却出现了问题。那么就是这个webpack配置有问题。
2、在webpack中，不将代码写到 monitor 文件中，就可以执行。那就是monitor的问题？但是其他错误监控却没有。
3、资源加载错误与其他错误监控有个区别，他的加载必须先于资源加载，否则，根本无法触发错误。可是我们前面已经配置了这个，将代码放到了html的最上面。

inject: 'head'

4、实践是检验真理的唯一标准。npm run build，看看到底是怎么一回事。位置没有问题，代码也没有问题。但是…

<script defer src="monitor.js"></script>

为什么，会多一个defer属性呢？

我们都知道，加了该属性的script，脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行。

那么，罪魁祸首就是他，在打包好的dist中，我去掉了defer，一切都好了。

5、定位问题了，接下来就要知道是哪部分出了问题。因为我使用了webpack5，第一怀疑就是他，转而想想又不是（确实不是，后续我还专门降级到webpack4测试）。打包他的是html-webpack-plugin 。
6、我先去了webpack找html-webpack-plugin的文档，没有找到原因。接着又去找github的 html-webpack-plugin ，这一次找到原因…

图中标黄的，是他的默认值，所以会自动加defer属性，
按照文档，修改如下：

plugins: [
     new HtmlWebpackPlugin({
         template: "./src/index.html",
         inject: 'head',
         scriptLoading: 'blocking'
     })
 ]

版本

我记得之前使用 html-webpack-plugin 打包是不会添加 defer的。为了验证自己的记忆，我又查看了版本…

当前项目我使用的是 5.2.0， 2月份更新的

最新的版本是 5.3.1 18天前更新的

本地有使用记录的是4.5.1 一月份更新，这个版本的就不会自动添加defer属性

总结

通过这个事情，其实可以得出很多结论。遇到问题不要慌，也不要忙着问人。因为像这种问题，百度都不知道如何百度（百度的前提是定位了方向）。

自己多思考，而且像这种莫名其妙的问题，大多少情况，大概率是版本问题。

本次分享就到这里，感觉我还不错的伙伴，点个赞，加个关注呗！！！小轩，先行拜谢。