Next.js中加载WebM、MP4视频文件编译报错，寻求解决方案

你遇到的问题核心在于Webpack5已经不再依赖file-loader这类第三方加载器，它内置了「Asset Modules」系统来处理静态资源，你的现有配置和Webpack5的默认机制冲突了，而且withVideos这类针对Webpack4的插件也不再适配。

下面是具体的修复步骤：

1. 清理不必要的依赖 #

如果你之前安装了file-loader，先卸载它——Webpack5完全不需要它：

npm uninstall file-loader
# 或者用yarn
yarn remove file-loader

2. 修改next.config.js配置 #

替换掉原来的视频文件处理规则，改用Webpack5内置的asset/resource类型，同时调整配置结构避免和withImages冲突：

const withPlugins = require('next-compose-plugins');
const withImages = require('next-images');

const nextConfig = {
  future: {
    webpack5: true,
  },
  webpack: (config, { isServer }) => {
    // 保留你的SVG处理规则
    config.module.rules.push({
      test: /\.svg$/,
      issuer: { test: /\.(js|ts)x?$/ },
      use: ['@svgr/webpack'],
    });

    // 用Webpack5内置能力处理视频文件
    config.module.rules.push({
      test: /\.(mp4|webm|ogg|ogv)$/,
      type: 'asset/resource',
      generator: {
        // 根据服务端/客户端构建调整输出路径
        filename: isServer 
          ? '../static/videos/[name]-[hash].[ext]' 
          : 'static/videos/[name]-[hash].[ext]',
        // 对应Next.js静态资源的访问路径
        publicPath: '/_next/',
      },
    });

    // 保留你原有的其他自定义配置
    config.plugins.push(new config.webpack.EnvironmentPlugin(process.env));
    config.optimization.minimize = false;

    return config;
  },
};

module.exports = withPlugins([withImages], nextConfig);

配置关键点解释： #

• type: 'asset/resource'：等价于Webpack4的file-loader，会自动将视频文件输出到指定目录，并返回对应的访问URL。
• generator.filename：适配Next.js的服务端/客户端构建差异，确保视频文件最终被放到/.next/static/videos目录下。
• 移除了withVideos这类过时插件，避免配置冲突。

3. 在组件中正确引用视频 #

你可以像引用图片一样import视频文件，然后在<video>标签中使用：

import FeatureWebM from '../assets/media/video/feature1.webm';
import FeatureMP4 from '../assets/media/video/feature1.mp4';

export default function HomePage() {
  return (
    <video controls width="800">
      <source src={FeatureWebM} type="video/webm" />
      <source src={FeatureMP4} type="video/mp4" />
      你的浏览器不支持视频播放
    </video>
  );
}

备选方案：直接使用public目录 #

如果你不需要给视频文件名加hash，更简单的方式是把视频放到项目根目录的public/videos文件夹下，然后直接用绝对路径引用：

<video controls width="800">
  <source src="/videos/feature1.webm" type="video/webm" />
</video>

这种方式不需要修改任何webpack配置，Next.js会自动处理public目录下的静态资源。

完成以上步骤后，重启next dev或者重新执行next build，应该就能顺利编译视频文件了。

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