脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → webpack 动态批量加载文件

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

 更新时间：2020年03月19日 09:46:55   作者：savokiss  
这篇文章主要介绍了webpack 动态批量加载文件的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

背景

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

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

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

// 就是这么任性，下标从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 动态批量加载文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS截取数组操作简单示例

    JS截取数组操作简单示例

    这篇文章主要给大家介绍了关于JS截取数组操作的相关资料,对数组的操作相信大家都不陌生,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • 微信小程序中wxs文件的一些妙用分享

    微信小程序中wxs文件的一些妙用分享

    wxs相当于一个独立模块,相当于一个独立出来的module对象,通过module.exports向外暴露,在文件中引入即可使用,下面这篇文章主要给大家介绍了关于微信小程序中wxs文件的一些妙用,需要的朋友可以参考下
    2022-01-01
  • window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法

    window.location.href = window.location.href 跳转无反应 a超链接onclic

    js下window.location.href = window.location.href 跳转无反应 a 超链接 onclick 点击跳转无反应问题的解决方法
    2013-08-08
  • 使用JavaScript给图片添加水印的实现方法封装

    使用JavaScript给图片添加水印的实现方法封装

    图片加水印是一种常见的图像处理技术,通常用于保护版权、防止盗用、增加图片的识别度等多种场景,这篇文章主要给大家介绍了关于使用JavaScript给图片添加水印的实现方法封装,需要的朋友可以参考下
    2024-03-03
  • 通过说明与示例了解js五种设计模式

    通过说明与示例了解js五种设计模式

    这篇文章主要介绍了通过说明与示例了解js五种设计模式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
    2019-06-06
  • JS实现获取GIF总帧数的方法详解

    JS实现获取GIF总帧数的方法详解

    如何通过js在上传前就拿到它的总帧数来判断呢？本文就跟大家分享一种解决方案，并将其封装成插件发布至npm仓库，快跟随小编一起学习一下吧
    2022-05-05
  • js实现的倒计时按钮实例

    js实现的倒计时按钮实例

    这篇文章主要介绍了js实现的倒计时按钮,实例分析了javascript倒计时效果的相关实现技巧,需要的朋友可以参考下
    2015-06-06
  • JS实现表单中点击小眼睛显示隐藏密码框中的密码

    JS实现表单中点击小眼睛显示隐藏密码框中的密码

    这篇文章主要介绍了JS实现表单中点击小眼睛显示隐藏密码框中的密码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下
    2020-04-04
  • 判断数组是否包含某个元素的js函数实现方法

    判断数组是否包含某个元素的js函数实现方法

    下面小编就为大家带来一篇判断数组是否包含某个元素的js函数实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JavaScript function函数种类详解

    JavaScript function函数种类详解

    这篇文章主要为大家详细介绍了JavaScript function函数种类，包括普通函数、匿名函数、闭包函数，感兴趣的小伙伴们可以参考一下
    2016-02-02

最新评论