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`