上节loader加载器 把css代码转成js代码,以变进行语法树分析
loader也可以把图片进行打包
静态图片:
- 页面直接使用
<img src='' alt=''>
来使用,在页面中写死的 - 用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 根据资源内容而定,最合适}
}
]
}
]
}
}
总结:
- webpack会把
require(’./assets/index.css’)
require()后面的路径当作依赖 - 在编译 – 模块解析时, 需要读取require()的依赖,
webpack 会把图片当成js来读取,读到的是二进制的buffer
,需要用加载器loader 把二进制数据 转换成js代码,以便webpack 进行抽象语法树分析