84669인 학습
152542인 학습
20005인 학습
5487인 학습
7821인 학습
359900인 학습
3350인 학습
180660인 학습
48569인 학습
18603인 학습
40936인 학습
1549인 학습
1183인 학습
32909인 학습
webpack可以按需加载图片么？
之前弄图片按需加载（也叫懒加载），就是把需要的图片都push到数组里，然后当满足某个条件（比如图片外容器出现在可视区域），就把数组里的图片插入到src地址里。
**而webapck里有require.ensure()方法可以异步按需加载JS和html模板，达到按需加载一些遮罩层、弹出层的目的，但是webpack貌似操作不了html里的src,
那么具体要怎么做能按需加载图片？望解答拜谢!
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...
图片加载本身就是异步的，你把url的loader改小一点就全打包成静态资源了，一般都是8kb，小于这个的就直接内联base64了
{ test: /\.(jpe?g|png|gif|svg|webp)$/, loader: 'url?limit=8192&name=imgs/[name].[ext]'}
webpack的异步加载主要用于分包，就是打包的时候把那些不常用的模块剔除在外。在浏览器运行时，webpack自动加载只是一种加载的手段，总不能让你自己还在html写个
而图片本身就没有说打包到一起的（dataurl形式的除外），所以跟webpack的异步加载没多大关系。
况且，按需加载图片这个需求不是很古老么？你还接着用以前的那些lazyload插件就成了嘛。
require.ensure可以按需加载图片的呀,只是这里ensure的资源必须是确定的静态资源比如说有图片 1.png, 2.png, 3.png，你想根据情况异步加载这些图片，应该这样写if (..) require.ensure(['1.png'], function(require) {..})if (..) require.ensure(['2.png'], function(require) {..})if (..) require.ensure(['3.png'], function(require) {..})而不能这样写：var a = '1.png'var b = '2.png'var c = '3.png'require.ensure([a], function(require) {..}) // 这里不能使用变量的形式require.ensure([b], function(require) {..}) // 这里不能使用变量的形式require.ensure([c], function(require) {..}) // 这里不能使用变量的形式
补充： require.ensure这种异步加载资源，是为了减小打包后的文件大小
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
图片加载本身就是异步的，你把url的loader改小一点就全打包成静态资源了，一般都是8kb，小于这个的就直接内联base64了
{ test: /\.(jpe?g|png|gif|svg|webp)$/, loader: 'url?limit=8192&name=imgs/[name].[ext]'}webpack的异步加载主要用于分包，就是打包的时候把那些不常用的模块剔除在外。在浏览器运行时，webpack自动加载只是一种加载的手段，总不能让你自己还在html写个
而图片本身就没有说打包到一起的（dataurl形式的除外），所以跟webpack的异步加载没多大关系。
况且，按需加载图片这个需求不是很古老么？你还接着用以前的那些lazyload插件就成了嘛。
require.ensure可以按需加载图片的呀,只是这里ensure的资源必须是确定的静态资源
比如说有图片 1.png, 2.png, 3.png，你想根据情况异步加载这些图片，应该这样写
if (..) require.ensure(['1.png'], function(require) {..})
if (..) require.ensure(['2.png'], function(require) {..})
if (..) require.ensure(['3.png'], function(require) {..})
而不能这样写：
var a = '1.png'
var b = '2.png'
var c = '3.png'
require.ensure([a], function(require) {..}) // 这里不能使用变量的形式
require.ensure([b], function(require) {..}) // 这里不能使用变量的形式
require.ensure([c], function(require) {..}) // 这里不能使用变量的形式
补充： require.ensure这种异步加载资源，是为了减小打包后的文件大小