Next.js中添加assets目录视频报错，求webpack loader配置方案

问题描述 #

在../assets/video.mp4路径下有一个video.mp4文件，使用以下代码导入视频时出现报错：

代码 #

import video from '../assets/video.mp4';

<video controls>
<source src={video} type="video/mp4" />
</video>

错误信息 #

./assets/video.mp4 Module parse failed: Unexpected character ''(1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. (Source code omitted for this binary file)

解决方案 #

Webpack默认不会处理视频这类二进制文件，需要配置对应的规则来支持，分两种场景处理：

场景1：使用Webpack 5及以上版本 #

Webpack 5内置了Asset Modules，无需额外安装loader，直接在webpack.config.js中添加规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(mp4|webm|ogg)$/i,
        type: 'asset/resource'
      }
    ]
  }
};

配置完成后，Webpack会自动处理这些视频文件，导出文件的访问URL，原导入代码即可正常使用。

场景2：使用Webpack 4及以下版本 #

需要安装file-loader来处理视频文件：

1. 安装依赖：

npm install file-loader --save-dev

2. 在webpack.config.js中添加规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(mp4|webm|ogg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash].[ext]',
              outputPath: 'videos/'
            }
          }
        ]
      }
    ]
  }
};

替代方案：使用Public目录 #

如果不想配置Webpack，可以将视频文件放到项目的public文件夹下，直接通过静态路径访问：

<video controls>
  <source src="/video.mp4" type="video/mp4" />
</video>

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