引言:webpack默认只能打包js文件,想要在代码中引用其他文件类型,需要不同的loader来处理。当代码中使用图片(png|jpe?g|gif)时,需要用到file-loader进行编译。然后再进行webpack打包。
file-loader用法:版本@4.0.0
配置:
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
],
},
};
使用:
注意:要在html中引用图片进行打包需要安装html-withimg-loader,html-withimg-loader会调用file-loader来对图片进行处理,再参与打包。
//css 用法
background: url('../cover.jpg')
//js 用法
let img =new Image()
let src = require ('../cover.jpg')
// import src from '../cover.jpg'
console.log(src,1000)
img.src = src
document.body.appendChild(img)
//html用法
<img src="./cover.jpg">
低版本的用法到此就结束了。
注意:
但是在版本@6.0.0 的使用中出现了问题,在html中使用和在js中使用都出现了打包链接错误的现象。如下:
//html
打包前:<img src="./cover.jpg"> =>打包后<img src="{"default":"images/ec7912772accb93cf96e84407a5459d4.jpg"}">
//js
let src = require ('../cover.jpg');console.log(src,1000); =>Module {default: "images/ec7912772accb93cf96e84407a5459d4.jpg", __esModule: true, Symbol(Symbol.toStringTag): "Module"}
可以发现打包后的链接变成了一个对象,这是因为file-loader@6.0.0版本中,为了优化性能新增了一个关键的配置项esModule
。这个配置项的作用,是指定引入文件的方式,是否指定es module的形式引入(也就是 improt name from ‘url’)这个配置项默认值是true,如果是true的情况下,那再使用require或者<imgsrc="./cover.jpg">引用方式就会出现上面的问题。
解决方法:把esModule这个配置项配置为false,或者在js中使用improt语法引入import src from '../cover.jpg'。但是即使在js中使用了import语法还是解决不了在html中的引用问题。所以可以选择直接把esModule配置为false即可。配置示例:
rules: [
{
test: /.(png|jpg|gif)$/,
use: [{
loader: "file-loader", options: {
esModule:false
}
}]
},
]
这样在js和html中就可以随意引入。
一坑刚平一坑又起!在此我联想到url-loader,url-loader可以指定图片在某个大小范围内直接编译成base64插入到页面,编译成base64来显示。基本配置如下。
{ loader: 'url-loader', options: { limit: 10*1024, }, }
这样就指定了小于10kb的图片直接打包成base64。
但是url-loader只负责把图片编译成base64,base64也可以看做一个链接,这个链接最终还是要交给file-loader来处理。file-loader会把这个链接进行编译成一个内部链接进行插入,上文提到file-loader添加了新的配置想esmodule,那url-loader势必要给出对应的配置项来配合。经查看文档,果不其然。url-loader文档如下:
![3f45dc79d409cc246bf31f984a719e35.png](https://i-blog.csdnimg.cn/blog_migrate/54e835681425e51ce5617768a05d38e6.jpeg)
这个esModule配置项和file-loader的esmodule完全一样。
引用file-loader:https://github.com/webpack-contrib/file-loader
url-loader:https://www.npmjs.com/package/url-loader#esmodule
html-withimg-loader:https://www.npmjs.com/package/html-withimg-loader