url-loader作用:
由于 url-loader 包含了 file-loader 所以,file-loader 内的 option 在 url-loader 中均能使用。
url-loader 不适用的场景:
安装依赖:
npm install --save url-loader file-loader
webpack.config.js
配置文件中添加处理规则:
module:{
rules:[
{ test: /\.(jpg|png|gif|bmp|jpeg)$/i,//正则表达式匹配图片规则,i忽略大小写
use: [{
loader:'url-loader',
options:{
limit:8192,//限制打包图片的大小:
//如果大于或等于8192Byte,则按照相应的文件名和路径打包图片;如果小于8192Byte,则将图片转成base64格式的字符串。
name:'img/[name].[hash:8].[ext]',//img:图片打包的文件夹;
//[name].[ext]:设定图片按照本来的文件名和扩展名打包,不用进行额外编码
//[hash:8]:一个项目中如果两个文件夹中的图片重名,打包图片就会被覆盖,加上hash值的前八位作为图片名,可以避免重名。
}
}]}
]
}
url-loader
只处理两种图片引入情况:(注意url-loader
的引入必须是相对路径)
- React 组件内部直接引入:
import red_png from "./red.png";
<img src = {red_png} />
- css 背景图引入:(使用url-loader相对路径,不使用的话需要绝对引用)
background-image: url("./images/blue.png");
只有这两种图片引入方式:
- 当图片大小小于 limit 时:base64 打包
- 当图片大小大于 limit 时:file-loader 会起作用,按照参数
name: "img/[name].[hash:7].[ext]"
复制完之后重命名。打包之后大约是这样子:
js中的路径赋值,例如:
const img=getElementByTagName('img')[0];
img.src="./imges/img.jpg"
请使用:
const img=getElementByTagName('img')[0];
img.src=require("./imges/img.jpg")