javascript - 如何测试 webpack 的 require.context 函数
问题描述
我有一个 vue 轮播组件,我想在静态文件夹中生成 .png 文件的列表。遵循使用 webpack 从目录中动态导入图像并遵循https://webpack.js.org/guides/dependency-management/#context-module-api我的组件如下所示:
<template>
<v-carousel>
<v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
</v-carousel>
</template>
<script>
// https://stackoverflow.com/questions/2727167/how-do-you-get-a-list-of-the-names-of-all-files-present-in-a-directory-in-node-j
var cache = {};
function importAll(r) {
r.keys().forEach(key => cache[key] = r(key));
}
var getImagePaths = importAll(require.context('../static/', false, /\.png$/));
// At build-time cache will be populated with all required modules.
export default {
data: function() {
return {
items: getImagePaths
};
}
};
// export default {
// data() {
// return {
// items: [{
// src: "/52lv.PNG"
// },
// {
// src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
// },
// {
// src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
// },
// {
// src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
// }
// ]
// };
// }
// };
//
</script>
注释掉的部分用于加载轮播图像,因此我需要生成一个看起来像项目的对象。我意识到我还不在那里,但是当我运行开发服务器时,我看到:
[Function: webpackContext] {
20:20:42
keys: [Function: webpackContextKeys],
resolve: [Function: webpackContextResolve],
id: './static sync \\.png$'
}
这是什么意思,我如何测试我是否有正确的使用 webpack 的 require.context() 函数的路径?
解决方案
推荐阅读
- android - 在 Anbox 中为 Android 提供位置信息 (GPS)
- php - 如何更新我的数组并在 codeigniter 中返回
- c# - C# 中 OnnxRuntime 张量的高效位图
- python - “Python 已停止工作” - 当我尝试将记录从数据库显示到 QListWidget
- tensorflow - 通用句子编码器嵌入运行时错误:分配器 CPU 耗尽资源
- javascript - 从 JavaScript 中的每个其他数组中找到包含至少一个元素的最小子数组的最简单方法是什么?
- react-native - react-native-code-push 如何判断更新?
- python - 如何从 Python 处理中的主文件导入变量?
- javascript - 忽略空对象
- android - 从片段检索时静态变量为空,在另一个片段上工作?