图片加载
in Javascript
webpack只能处理js模块，在js中加载图片模块时需要借助file-loader。如
//index.js
import photo from './../static/image/Chrome.png';
const image = new Image()
image.src = photo
document.body.appendChild(image)
webpack配置file-loader
module.exports = {
mode: 'production',
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
publicPath: 'www.txx.com',
},
},
// 'image-webpack-loader'
],
},
],
}
}
file-loader 和 url-loader 的区别
url-loader内部继承了file-loader，与file-loader不同的是：
- url-loader可以把较小的图片转化成base64数据，从而减少对图片资源的http请求。同时打包文件也会变大；
- 当图片大小超过设置的限制（limit）时，默认采用file-loader进行加载。fallback默认值“file-loader”；
- 所有file-loader的属性，url-loader均可以使用。例如publicPath设置图片公共地址（图片部署到CDN服务器）
in CSS
在css中使用图片时，如background直接指定图片路径即可。
.root{
width: 200px;
height: 200px;
background: url("./../static/image/webpack.jpg") 100%;
}
因为css-loader对css中引用的图片进行了处理
in html
html中通过 <img src=""> 标签直接使用图片时，需要借助html-withimg-loader。如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<img src="./../static/image/eslint.jpeg" >
</body>
</html>
webpack配置loader
module.exports = {
mode: 'production',
module: {
rules: [
{
test: /\.(htm|html)$/,
exclude: /node_modules/,
use: 'html-withimg-loader',
}
],
}
}
同时，file-loader/url-laoder 的 esModule设置为false。自webpack2开始，内部就集成了tree shaking代码优化，只会加载引用了的模块，html的图片会被视作未引用的模块资源
图片压缩
进过以上配置，我们已经可以成功地打包图片资源了，接下来我们要对图片资源进行压缩，在页面加载时减少响应时间。
目前主流的webpack图片压缩无非就是 image-webpack-loader 和 imagemin-webpack-plugin。一种是配置loader，一种是配置插件，参数配置也大同小异。个人倾向使用前者，下面就 image-webpack-loader 配置举例
module.exports = {
mode: 'production',
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
publicPath: 'www.txx.com',
},
},
{
loader: 'image-webpack-loader',
options: {
disable: process.env.NODE_ENV !== 'production', //仅生产环境对图片进行压缩
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
}
}
],
},
],
}
}
image-webpack-loader 参数配置参考
雪碧图
“雪碧图”又叫css精灵（css sprite），css图片合成技术。
当我们在开发中需要用到很多小图片的时候，比如菜单icon，悬浮icon等，相信大部分开发者直观的做法是直接下载UI稿中的切图，在项目中引入使用。是，这样做没错，但是作为一个直接面向客户的开发者，我们对自己的产品必须严格要求，做到性能最优。
假如我们的应用首屏需要加载很多小图片，也就是说除了html，js，css等请求外，还需要发送很多次http请求去下载图片资源，这显然会降低首屏加载速度，用户体验很差。那么，我们是否可以考虑把这些小图合并成一张大图，然后用css去定位截取使用呢？显然是可以的，这里我只提一下技术方案，不做具体实现demo了
图片合成
首先我们要把这些小图合成一张大图，然后写css样式去扣。听起来很复杂，哈哈哈别怕，社区很强大，牛逼的人也很多，早就有大佬写了一套完整的工具去帮我们完成这些操作。
- webpack-spritesmith完成图片合并和对应css样式导出；
- image-webpack-loader压缩图片
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！