如何配置Webpack Loader处理node_modules中的.wgsl文件？

问题核心是Next.js默认不会对node_modules内的文件应用自定义Webpack loader，即便配置了transpilePackages也仅负责转译代码，不会自动关联loader。试试以下针对性配置方案：

1. 修正next.config.js的Webpack规则 #

在webpack配置中明确指定loader要处理node_modules/@use-gpu/workbench下的.wgsl文件，同时保留对本地源码的支持：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 添加.wgsl文件的loader规则
    config.module.rules.push({
      test: /\.wgsl$/,
      use: '@use-gpu/wgsl-loader',
      // 明确包含需要处理的路径：本地源码 + 目标npm包
      include: [
        /src/, // 你的项目源码目录，根据实际调整
        /node_modules\/@use-gpu\/workbench/
      ],
    });

    return config;
  },
  // Next.js 13+ 需添加该配置，确保包被转译
  transpilePackages: ['@use-gpu/workbench'],
};

module.exports = nextConfig;

2. 清除缓存并重新构建 #

Next.js的缓存可能导致配置不生效，执行以下操作：

• 删除项目根目录下的.next文件夹
• 删除node_modules/.cache文件夹（如果存在）
• 重新运行npm run dev或npm run build

排查要点 #

• 检查@use-gpu/wgsl-loader版本是否与@use-gpu/workbench兼容，建议使用官方配套版本
• 确认include中的正则路径是否正确，跨平台写法无需调整路径分隔符
• 若之前用过next-transpile-modules请卸载，Next.js 13+内置的transpilePackages与它混用会冲突

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