webpack 动态批量加载文件的实现方法


Posted in Javascript onMarch 19, 2020

背景

最近笔者在工作中遇到了一个小需求:

要实现一个组件来播放帧图片

这个需求本身不复杂,但是需要在组件中一次性引入十张图片,就像下面这样:

// 就是这么任性,下标从0开始~
import frame0 from './assets/frame_0.png'
import frame1 from './assets/frame_1.png'
import frame2 from './assets/frame_2.png'
// ..省略n张
import frame7 from './assets/frame_8.png'
import frame8 from './assets/frame_9.png'
import frame9 from './assets/frame_10.png'

作为一个有代码洁癖的程序员,我是不允许这种重复性代码存在滴,于是乎就尝试有没有什么简单的方法。

方法一:绕过 webpack

由于笔者用的是 vue-cli 3,熟悉的小伙伴都知道,将图片以固定的格式放在 public 文件夹下面,然后在代码中直接以绝对路径引入即可。这么做的话,就可以根据文件名构造一个 url 数组,简单代码如下:

const frames = []
_.times(10, v => {
  frames.push(`/images/frame_${v}.png`)
})
// 然后你就得到 10个 url 的数组啦

此方法本身是 vue-cli 提供的一个 应急手段,它有几个缺点:

  • 无法利用 webpack 处理资源,无法产生内容哈希,不利于缓存更新
  • 无法利用 url-loader 将资源内联成 base64 字符串 以减少网络请求

方法二:require

由于 import 是静态关键字,所以如果想要批量加载文件,可以使用 require,但是直接像下面这样写是不行的:

const frames = []
_.times(10, v => {
  const path = `./assets/images/frame_${v}.png`
  frames.push(require(path))
}

上面的代码中的 path 是在程序运行时才能确定的,即属于 runtime 阶段,而 webpack 中的 require 是在构建阶段确定文件位置的,所以 webpack 没法推测出这个 path 在哪里。

但是却可以这样写:

const frames = []
_.times(10, v => {
  frames.push(require(`./assets/images/frame_${v}.png`))
}
// frames 中就得到 带 hash 值的路径

虽然这两种写法在语法上没有差别,但是第二种写法在构建时提示了 webpack,webpack 会将 ./assets/images 中的所有文件都加入到 bundle 中,从而在你运行时可以找到对应的文件。

在使用方法二的时候笔者尝试将批量加载的逻辑提取到其他模块用来复用:

export function loadAll (n, prefix, suffix) {
 const frames = []
 _.times(n, v => {
  frames.push(require('./' + prefix + v + suffix))
 })
 return frames
}

但是显然失败了,因为提取后的代码,运行的 context 属于另一个模块,所以也就无法找到相对路径中的文件。

方法三:require.context

上面两种方法都不算很优雅,于是就去翻 webpack 的文档,终于,让我找到了这么一个方法:require.context

require.context(
 directory: String,
 includeSubdirs: Boolean /* 可选的,默认值是 true */,
 filter: RegExp /* 可选的,默认值是 /^\.\/.*$/,所有文件 */,
 mode: String /* 可选的,'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once',默认值是 'sync' */
)

指定一系列完整的依赖关系,通过一个 directory 路径、一个 includeSubdirs 选项、一个 filter 更细粒度的控制模块引入和一个 mode 定义加载方式。然后可以很容易地解析模块.

我们还是看上面的例子:

const frames = []
const context = require.context('./assets/images', false, /frame_\d+.png/)
context.keys().forEach(k => {
  frames.push(context(k))
})

这里的代码通过 require.context 创建了一个 require 上下文。

  • 第一个参数指定了需要加载的文件夹,即组件当前目录下的 ./assets/images 文件夹
  • 第二个参数指定是否需要包含子目录,由于没有子目录,所以传 false
  • 第三个参数指定需要包含的文件的匹配规则,我们用一个正则表示

然后使用 context.keys() 就能拿到该上下文的文件路径列表,而 context 本身也是一个方法,相当于设置过上下文的 require,我们将 require 后的文件放入数组中,数组中的路径其实是带 hash 值的,如下是我项目中的图片:

["/static/img/frame_0.965ef86f.png", "/static/img/frame_1.c7465967.png", "/static/img/frame_2.41e82904.png", "/static/img/frame_3.faef7de9.png", "/static/img/frame_4.27ebbe45.png", "/static/img/frame_5.d98cbebe.png", "/static/img/frame_6.c10859bc.png", "/static/img/frame_7.5e9cbdf0.png", "/static/img/frame_8.b3b92c71.png", "/static/img/frame_9.36660295.png"]

而且如果设置过内联图片的话,数组中可能还有图片的 base64 串。

重构一下

方法三已经解决了我们的问题,而且可以批量 require 某个文件夹中的文件。但是 forEach 那块的逻辑明显是重复的,所以我们当然提取出来啦,以后多个组件调用的时候只需要引入即可:

公共模块:

/**
 * 批量加载帧图片
 * @param {Function} context - require.context 创建的函数
 * @returns {Array<string>} 返回的所有图片
 */
function loadFrames (context) {
 const frames = []
 context.keys().forEach(k => {
  frames.push(context(k))
 })
 return frames
}

组件中:

const context = require.context('./assets/images', false, /frame_\d+.png/)
const frames = loadFrames(context)

大功告成!感兴趣的小伙伴可以点击文末链接查看详细文档~

参考链接
require.context
webpack dynamic require

到此这篇关于webpack 动态批量加载文件的实现方法的文章就介绍到这了,更多相关webpack 动态批量加载文件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 #Javascript
js实现经典贪吃蛇小游戏
Mar 19 #Javascript
javascrpt密码强度校验函数详解
Mar 18 #Javascript
Node.js Domain 模块实例详解
Mar 18 #Javascript
js判断密码强度的方法
Mar 18 #Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 #Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 #Javascript
You might like
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
accesskey 提交
2006/06/26 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
简单学习vue指令directive
2016/11/03 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
从vue源码看props的用法
2019/01/09 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
Python 变量类型及命名规则介绍
2013/06/08 Python
Python的另外几种语言实现
2015/01/29 Python
python中update的基本使用方法详解
2019/07/17 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
美国在线家装零售商:Build.com
2016/09/02 全球购物
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
银行青年文明号事迹材料
2014/05/31 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
2019教师的学习计划
2019/06/25 职场文书