webpack5识别html中的图片以及将图片打包到对应的文件夹中

index.html 中引入了图片

<img src="../images/pengyuyan.jpeg" alt="这里有张图" />

需要使用 html-withimg-loader 处理 HTML 中的图片,但是昨天下午发现导致html文件中的<script>标签中的脚本全部没用了，今天看又是可以的。

{
        test: /\.(htm|html)$/,
        loader: 'html-withimg-loader'
}

另外为了打包的时候能把图片打包到dist指定的目录中，webpack5中需要

{
        // 正则匹配图片
        test: /\.(png|jpg|gif|jpeg)$/,
        //webpack5版本
        type: "asset/resource",
        generator: {
          //图片路径，存放在dist/imgs/原名+8位hash+后缀
          // filename: "images/[name]_[hash:8][ext]"
          filename: "images/[name]_[hash:8][ext]"
        }
        // webpack5最新通过添加 4 种新模块类型来替换所有这些加载器loader：
        // asset/resource发出一个单独的文件并导出 URL。以前可以通过使用file-loader.
        // asset/inline导出资产的数据 URI。以前可以通过使用url-loader.
        // asset/source导出资产的源代码。以前可以通过使用raw-loader.
        // asset自动在导出数据 URI 和发出单独的文件之间进行选择。以前可以通过使用url-loader资产大小限制来实现。
 
},

通常情况下，图片、视频以及大量文本绘制完成后就会报告LCP，难怪之前用了那么多方式都很难获得这个数据，后面通过加载图片就可以了。

不过昨天测试的时候发现有时候没有LCP的值，有时候没有FMP的值，今天看又是好的，挺奇怪的！