如何在Webpack中导入整个文件夹？国际象棋项目SVG批量导入

方法1：用Webpack内置的require.context（无需额外插件） #

这是最直接的原生方案，适合快速批量导入文件夹内的所有SVG：

• 新建一个专门处理SVG导入的模块（比如chessPieces.js），写入以下代码：

// 第一个参数是SVG文件夹路径，第二个参数设为false表示不递归子文件夹，第三个是匹配.svg文件的正则
const svgContext = require.context('./assets/chess-pieces', false, /\.svg$/);

// 将所有SVG转为键值对导出，键是文件名（不含后缀），值是导入的SVG资源
const chessPieces = svgContext.keys().reduce((map, path) => {
  // 提取文件名，比如 './white-queen.svg' 转为 'white-queen'
  const pieceName = path.replace(/^\.\/(.*)\.svg$/, '$1');
  map[pieceName] = svgContext(path);
  return map;
}, {});

export default chessPieces;

• 在需要使用棋子SVG的文件中直接导入：

import chessPieces from './chessPieces';

// 示例：调用白后SVG
console.log(chessPieces['white-queen']);

方法2：用svg-sprite-loader生成雪碧图（优化性能） #

如果想把所有SVG合并成单张雪碧图减少请求，可以用这个loader：

1. 先安装依赖：

npm install svg-sprite-loader --save-dev

2. 修改Webpack配置文件（webpack.config.js），添加SVG处理规则：

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        include: path.resolve(__dirname, './assets/chess-pieces'), // 仅匹配棋子SVG文件夹
        use: [
          {
            loader: 'svg-sprite-loader',
            options: {
              symbolId: 'chess-piece-[name]' // 生成的雪碧图符号ID，方便后续引用
            }
          }
        ]
      }
    ]
  }
};

3. 批量导入所有SVG（同样用require.context）：

const svgContext = require.context('./assets/chess-pieces', false, /\.svg$/);
svgContext.keys().forEach(svgContext); // 执行导入，让loader生成雪碧图

4. 在页面中通过<use>标签引用：

<svg width="40" height="40">
  <use xlink:href="#chess-piece-black-king"></use>
</svg>

注意事项 #

• 替换代码中的./assets/chess-pieces为你实际的SVG文件夹路径。
• 如果需要递归导入子文件夹，把require.context的第二个参数改为true。
• 使用svg-sprite-loader时，注意避免和其他SVG处理loader（如file-loader）冲突，可通过include/exclude区分不同场景的SVG。

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