博客无法加载Webp格式图片解决方法

时间：2021年3月8号

参考：https://www.cnblogs.com/dengxiaoning/p/12615936.html

打算把博客能换的图片全部换成webp格式的，减少图片的体积，加速图片的加载。结果，在替换完后发现图片全部加载不出来了(っ °Д °;)っ。浏览器打开F12一看，报错如下：

./docs/.vuepress/public/assets/page-img/20201121/1.webp 1:4
Module parse failed: Unexpected character '�' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

搜索后发现是loader没配置对，在config.js文件中新增下面的配置就好了

chainWebpack: (config) => {
        config.module
            .rule('url-loader')
            .test(/\.(webp)(\?.*)?$/)
            .use('url-loader')
            .loader('url-loader')
            .end()
},