webpack—url-loader解决项目中所有图片打包问题

  在使用webpack对项目进行打包时，图片的引用遇到一些问题，整理一下webpack对图片打包的思路。

url-loader

使用url-loader加载器实现项目中的路径解析。具体使用其用来打包图片的过程如下：

1. 安装：npm i url-loader -D
2. webpack.config.js配置文件中添加处理规则：
module：{
    rules：[
        { test: /\.(jpg|png|gif|bmp|jpeg)$/,//正则表达式匹配图片规则
        use: [{
        loader:'url-loader',
        options:{
            limit:8192,//限制打包图片的大小：
            //如果大于或等于8192Byte，则按照相应的文件名和路径打包图片；如果小于8192Byte，则将图片转成base64格式的字符串。
            name:'images/[name]-[hash:8].[ext]',//images:图片打包的文件夹；
            //[name].[ext]：设定图片按照本来的文件名和扩展名打包，不用进行额外编码
            //[hash:8]：一个项目中如果两个文件夹中的图片重名，打包图片就会被覆盖，加上hash值的前八位作为图片名，可以避免重名。
        }
        }]}
    ]
}

web项目中图片引用的三种方式

1.css中的背景图片

background-image:url(./images/img.jpg)

2.html中<img>标签

<img src="./imges/img.jpg">

3.js中的路径赋值

const img=getElementByTagName('img')[0];
img.src="./imges/img.jpg"

问题及解决

  web项目中图片引用的三种方式中，按照url-loader的配置步骤，css中背景图片、html标签引用都能顺利打包，只有js中出现问题。

问题：在js中，路径被当做字符串赋值给了src属性，webpack也将其当做字符串直接解析，因此，将项目打包至目的文件夹后，图片的路径引用出现问题。

例如：如下是一个项目的目录结构，源文件都放在src文件夹中，webpack打包之后的文件夹dist。webpack将图片路径当做字符串打包之后，dist/index.html与src/index.html中的图片引用路径一样，因此dist/index.html就找不到图片。

解决：将图片路径当做模块载入---require

const img=getElementByTagName('img')[0];
img.src=require("./imges/img.jpg")

至此，webpack能够正常打包css、html<img>、js中的图片引用。