使用Gulp与Webpack构建项目时无法插入视频的问题求助

问题原因 #

Live Server直接读取项目根目录的文件，而Webpack/Gulp构建时会将资源打包到输出目录（通常是dist），但你当前的视频路径仍指向原始src目录，且构建工具未将视频文件复制到输出目录，导致请求404。

解决方案 #

1. 配置Webpack处理视频资源 #

Webpack 5+ 推荐使用asset/resource模块处理媒体文件，在webpack.config.js中添加规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(mp4|webm)$/,
        type: 'asset/resource',
        generator: {
          filename: 'media/[name][ext]' // 视频会输出到 dist/media 目录
        }
      }
    ]
  }
};

如果是Webpack 4及以下，使用file-loader：

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

2. 修改HTML中的视频路径 #

构建后视频会输出到dist/media，所以调整HTML的src路径：

<video id="video" width="100%" height="auto" autoplay loop preload="auto">
  <source src="./media/APEK - Exposed (Official Music Video) ft. April Bender(1080p).mp4" type="video/mp4">
  <source src="./media/sample-5s.webm" type="video/webm">
</video>

如果使用html-webpack-plugin，可在模板中通过<%= require('./src/xxx.mp4') %>的方式引入，让插件自动解析资源路径。

3. 配置Gulp复制视频资源（若单独用Gulp处理） #

如果Gulp负责部分资源处理，添加复制视频的任务：

const gulp = require('gulp');

// 复制视频到输出目录
gulp.task('copy-videos', () => {
  return gulp.src(['src/*.mp4', './sample-5s.webm']) // 根据实际文件位置调整源路径
    .pipe(gulp.dest('dist/media'));
});

// 将该任务加入构建流程
gulp.task('build', gulp.series('copy-videos', 'webpack-build'));

4. 验证结果 #

• 执行构建命令后，检查dist/media目录下是否存在你的视频文件
• 打开dist中的HTML文件，确认视频src路径与实际输出文件一致

内容的提问来源于stack exchange，提问作者Адиль