使用Webpack时，如何将目录中的文件列表存入变量？

方法一：使用Webpack内置的require.context（最便捷） #

Webpack提供了require.context API，可以自动扫描指定目录的文件，同时在代码中获取文件列表和资源引用，无需额外脚本。

示例代码：

// 创建上下文：扫描当前目录下的images文件夹，不递归子目录，匹配常见图片格式
const imagesCtx = require.context('./images', false, /\.(png|jpe?g|gif|svg)$/);

// 获取所有图片文件的路径数组
const imagePaths = imagesCtx.keys();

// 生成「文件名→资源URL」的映射（方便直接使用图片资源）
const imageMap = imagePaths.reduce((map, path) => {
  const fileName = path.replace('./', '');
  map[fileName] = imagesCtx(path); // Webpack会将图片处理为资源URL
  return map;
}, {});

// 可直接使用变量
console.log('所有图片路径：', imagePaths);
console.log('图片资源映射：', imageMap);

说明：Webpack打包时会自动将匹配到的图片加入打包流程，同时你能在代码中动态获取文件列表。

方法二：Node脚本预生成JSON文件 #

通过Node脚本提前读取images目录的文件列表，生成JSON文件后在代码中导入，适合需要独立文件列表的场景。

1. 编写生成脚本（generate-image-list.js）：

const fs = require('fs');
const path = require('path');

// 读取images目录
const imagesDir = path.resolve(__dirname, 'images');
// 过滤出图片文件，可根据需求调整后缀
const imageFiles = fs.readdirSync(imagesDir).filter(file => /\.(png|jpe?g|gif|svg)$/.test(file));

// 写入JSON文件到源码目录
fs.writeFileSync(
  path.resolve(__dirname, 'src/image-list.json'),
  JSON.stringify(imageFiles, null, 2)
);

2. 在package.json中添加前置脚本，确保打包前自动更新列表：

"scripts": {
  "prebuild": "node generate-image-list.js",
  "build": "webpack",
  "predev": "node generate-image-list.js",
  "dev": "webpack serve"
}

3. 在代码中导入使用：

import imageList from './image-list.json';
console.log('图片列表：', imageList);

方法三：自定义Webpack插件（复杂需求场景） #

如果需要在打包过程中直接将文件列表注入全局变量，可编写简单的Webpack插件。

1. 编写插件（ImageListPlugin.js）：

const fs = require('fs');
const path = require('path');

class ImageListPlugin {
  constructor(options) {
    this.options = options;
  }

  apply(compiler) {
    compiler.hooks.compilation.tap('ImageListPlugin', () => {
      const imagesDir = path.resolve(compiler.context, this.options.dir);
      const imageFiles = fs.readdirSync(imagesDir).filter(file => this.options.test.test(file));
      
      // 将列表注入全局变量window.imageList
      compiler.mainTemplate.hooks.requireExtensions.tap('ImageListPlugin', () => {
        return `window.imageList = ${JSON.stringify(imageFiles)};`;
      });
    });
  }
}

module.exports = ImageListPlugin;

2. 在webpack.config.js中配置插件：

const ImageListPlugin = require('./ImageListPlugin');

module.exports = {
  // 其他Webpack配置...
  plugins: [
    new ImageListPlugin({
      dir: 'images',
      test: /\.(png|jpe?g|gif|svg)$/
    })
  ]
};

3. 在浏览器代码中直接使用：

console.log('全局图片列表：', window.imageList);

内容的提问来源于stack exchange，提问作者Newbrict