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 相关文章推荐
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
JavaScript 10件让人费解的事情
Feb 15 Javascript
JavaScript 对象的属性和方法4种不同的类型
Mar 19 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 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
PHP header()函数常用方法总结
2014/04/11 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
jquery form 加载数据示例
2014/04/21 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
python如何在终端里面显示一张图片
2016/08/17 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
技校个人求职信范文
2014/01/25 职场文书
三年级数学教学反思
2014/01/31 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis