Webpack动态批量加载文件实现方法
在前端开发中，常常需要批量引入大量静态资源，比如图片。直接使用 import 一次性引入这些文件，代码会显得有些冗长。这时，Webpack 的一些技巧就能派上用场。require.context 是 Webpack 的一个强大的工具，它可以你动态加载某个目录下符合条件的文件，而且还能用正则进行筛选，挺方便的。
比如说，如果你有一个 ./assets/images 目录，里面的图片命名方式是 frame_0.png、frame_1.png，你就可以通过下面的方式批量引入：
const context = require.context('./assets/images', false, /frame_\d+.png/);
const frames = context.keys().map(context);这段代码会自动加载目录下所有符合 frame_\d+.png 格式的图片，你可以把这些图片存放到数组中，随时使用。适合用于需要动态加载图片的场景，比如帧动画。
除了 require.context 外，你还可以通过 require 或者直接把文件放在 public 文件夹下进行加载，不过这些方法没有那么灵活或者方便。如果你对构建优化、性能提高有需求，可以尝试使用 require.context。
，Webpack 了不同的方法来你批量加载资源，选对方法会让代码更简洁，加载更高效。
文件大小：70.34KB
评论区