webpack loader- 图片处理

静态图片：

1. 页面直接使用<img src='' alt=''> 来使用,在页面中写死的
2. 用js来生成的

动态图片：通过ajax请求服务器，从服务器得到的图片路径，这些是不需要前端进行处理的

1、打包图片为 base64格式 / 文件路径格式

//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代码

// ./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来表示，

// webpack.config.js
module.exports = {
	mode:'development',
	module:{
		rules:[
			{
				test:/.(png)|(jpg)|(gif)$/,
				use:['./loaders/img-loader']
			}
		]
	}
}

　　

打包后dist里的代码：

---

也可以打包图片为 文件路径格式

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中自行配置

module.exports = {
	module:{
		rules:[
			{
				test:/.(png)|(jpg)|(gif)$/,
				use:['./loaders/img-loader.js','./loaders/css-loaders.js']
			}
		]
	}
}

　　

优化配置：在webpack 配置加载器的时候进行配置–options里自行规定

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 根据资源内容而定，最合适}
					}
				]
			}
		]
	}
}

　　

---

总结：

1. webpack会把require(’./assets/index.css’) require()后面的路径当作依赖
2. 在编译 – 模块解析时， 需要读取require()的依赖， webpack 会把图片当成js来读取，读到的是二进制的buffer，需要用加载器loader 把二进制数据 转换成js代码，以便webpack 进行抽象语法树分析