webpack使用file-loader与url-loader处理图片资源加载

• 一、使用file-loader加载图片资源
• 二、使用url-loader加载图片
• 三、打包后图片路径不对的问题
• 四、使用传统方式加载图片

一、使用file-loader加载图片资源

安装file-loader

yarn add file-loader --dev

配置

module:{
        rules:[
            {
                test:/.jpg|.png$/,
                use:'file-loader'
            }
        ]
    }
           

index.js中引用图片

import icon from "../images/img.jpg"
import icon2 from "../images/icon.png"

const img2 = new Image()
img2.src = icon2
img2.classList.add('img')
document.body.append(img2)

const img = new Image()
img.src = icon
img.classList.add('img')
document.body.append(img)
           

打包

yarn webpack

，查看效果

二、使用url-loader加载图片

安装

yarn add url-loader --dev

配置webpack.config.js

module:{
        rules:[
            {
                test:/.jpg|.png$/,
                use:{
					loader:"url-loader",
					options:{
						limit: 10 * 1024 // 这里的单位是字节，限制大小为10kb
						// 设置后url-loader就只会将10kb以下的文件转换为 Data URLs形式
						// 超过10kb的文件仍然会使用file-loader打包
						// 注意：使用这种方式使用url-loader的话，必须要安装file-loader
						// 因为url-loader对超出的文件会去调用file-loader
					}
				}
            }
        ]
    }
           

打包后页面正常显示，控制台可以看出不一样的地方。

png图片小于10kb，被url-loader转换成了base64格式。使用url-loader处理图片资源,会把其转换成base64,就不会再生成图片在dist目录下

三、打包后图片路径不对的问题

有些朋友可能因为webpakc或者loader版本的问题，打包后图片可能路径不对，少了目录名，可以在webpack.config.js中的output添加publickPath属性指定网站根目录为 dist/ ，一般就能解决了。

module.exports = {
    mode:'none',
    entry:"./src/main.js",
    output:{
        filename:"bundle.js",
        path:path.join(__dirname, "dist"),
        publicPath:"dist/" // 配置网站根目录,打包后图片路径不对可能就是路径问题,可以通过此方案解决
    }
    ...
}
           

四、使用传统方式加载图片

通过创建DOM节点，指定img的src属性和a标签的href属性，同样可以找到图片。

const imgTag = document.createElement("img")
imgTag.classList.add("img")
imgTag.src = "../images/img.jpg"
document.body.append(imgTag)

const aTag = document.createElement("a")
aTag.textContent = "this is jpg image"
aTag.href = "../images/img.jpg"
document.body.append(aTag)
           

但是可以看到，这个路径找的还是我们开发环境下的图片目录，webpack并没有将引用到的图片资源打包到dist目录中，如果是线上环境，这张图片应该就是访问不到的。

暂时还是推荐前面的那种用法，webpack会自动根据图片资源的加载去打包图片。