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 相关文章推荐
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
Node.js中的流(Stream)介绍
Mar 30 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
vue自动化表单实例分析
May 06 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 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
php5数字型字符串加解密代码
2008/04/24 PHP
php 过滤器实现代码
2010/08/09 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
分享PHP守护进程类
2015/12/30 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
木马的传播途径主要有哪些
2016/04/08 面试题
经典演讲稿范文
2013/12/30 职场文书
工程款申请报告
2015/05/15 职场文书
大学生实习证明
2015/06/16 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
SQL Server表分区删除详情
2021/10/16 SQL Server
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis