静态图片:
- 页面直接使用
<img src='' alt=''>
来使用,在页面中写死的 - 用js来生成的
动态图片:通过ajax请求服务器,从服务器得到的图片路径,这些是不需要前端进行处理的
1、打包图片为 base64格式 / 文件路径格式
1 2 3 4 5 | //main.js里引入图片模块 var src = require( './assets/logo.png' ) //commonjs里面没有导出,得到的是一个空对象{} var img = document.createElement( 'img' ); img.src = src; document.body.appendChild(img); |
如上写法,npx webpack
打包会报错
:因为webpack 用utf-8格式将图片当成js读出来
,读的是二进制格式的代码
,没办法进行语法树分析,所以要用loader加载器,把二进制数据给loader,loader将器处理成js代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // ./loaders/img-loader.js --loader 导出一个函数 function loader(sourceCode){ //console.log(sourceCode); //乱码,下面加loader.raw = true;才会用二进制格式去读 console.log( '文件数据大小(字节):' ,buffer.byteLength); //这里sourceCode 传进来的是个二进制buffer,但webpack确默认把传进来但内容都当字符串来读,所以在这里打印sourceCode会乱码 var content = getBase64(sourceCode); console.log(content); //这是buffer格式的sourceCode 转为base64格式的内容 return `module.exports = \`${content}\``; } loader.raw = true ; //raw是函数loader上的静态属性,true时表示原始格式的数据 //这样webpack处理的时候,看到来loader函数上有个静态属性raw为true,那处理的时候就不会用字符串来读sourceCode,而是用原格式buffer读,比如:如果传的sourceCode是buffer 那上面打印的还是buffer module.exports = loader; function getBase64(buffer){ return 'data:image/png;base64,' + buffer.toString( 'base64' ); //buffer转base64 } |
导出的图片可以是base64格式
二进制的数据用buffer
来表示,
1 2 3 4 5 6 7 8 9 10 11 12 | // webpack.config.js module.exports = { mode: 'development' , module:{ rules:[ { test:/\.(png)|(jpg)|(gif)$/, use:[ './loaders/img-loader' ] } ] } } |
打包后dist里的代码:
也可以打包图片为 文件路径格式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | var loaderUtil = require( "loader-utils" ) //npm 安装的模块 function loader(buffer) { //给的是buffer console.log( "文件数据大小:(字节)" , buffer.byteLength); var { limit = 1000, filename = "[contenthash].[ext]" } = loaderUtil.getOptions( this ); if (buffer.byteLength >= limit) { //超过限制用文件 var content = getFilePath.call( this , buffer, filename); } else { //否则用base64 var content = getBase64(buffer) } return `module.exports = \`${content}\``; } loader.raw = true ; //该loader要处理的是原始数据 module.exports = loader; function getBase64(buffer) { return "data:image/png;base64," + buffer.toString( "base64" ); } function getFilePath(buffer, name) { var filename = loaderUtil.interpolateName( this , name, { content: buffer }); this .emitFile(filename, buffer); return filename; } |
问题:hash、chunkhash、contenthash的区别
contenthash – 根据具体某个文件生成的hash
hash – 总资源列表生成的hash
chunkhash – 根据chunk 资源生成的hash
2、webpack.config.js中自行配置
1 2 3 4 5 6 7 8 9 10 | module.exports = { module:{ rules:[ { test:/\.(png)|(jpg)|(gif)$/, use:[ './loaders/img-loader.js' , './loaders/css-loaders.js' ] } ] } } |
优化配置:在webpack 配置加载器的时候进行配置–options里自行规定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | module.exports = { module:{ rules:[ { test:/\.(png)|(jpg)|(gif)$/, use:[ { loader: './loaders/img-loader.js' , options:{ limit:3000, //资源限定为多大字节,3000字节以内使用base64, 超过3000使用图片 filename: "img-[contenthash:5].[ext]" , //也可以用总hash, chunkhash,这里contenthash 根据资源内容而定,最合适} } ] } ] } } |
总结:
- webpack会把
require(’./assets/index.css’)
require()后面的路径当作依赖 - 在编译 – 模块解析时, 需要读取require()的依赖,
webpack 会把图片当成js来读取,读到的是二进制的buffer
,需要用加载器loader 把二进制数据 转换成js代码,以便webpack 进行抽象语法树分析
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步