webpack 加载video路径

Webpack 是一个强大的模块打包工具，当处理包含视频文件的应用时，它可以将视频文件作为静态资源管理并打包。对于视频路径的加载，你需要配置 Webpack 的 `file-loader` 或者 `url-loader`。这里是一个简单的例子：

1. **安装依赖**：首先确保已经安装了 `file-loader` 和 `url-loader`，如果没有可以使用 npm 或 yarn 安装：

   npm install file-loader url-loader --save-dev

2. **配置 loader**：在 `.webpack.config.js` 或者 `module.rules` 配置里添加规则，例如：

   module.exports = {
     // ...
     rules: [
       {
         test: /\.(mp4|webm|ogg|avi)$/i,  // 匹配视频文件的扩展名
         use: {
           loader: 'url-loader',
           options: {
             limit: 8192,  // 视频小于这个大小会转为base64字符串，大于则直接输出文件路径
             outputPath: 'videos/',  // 输出文件的路径
             name: '[name].[ext]',  // 输出文件的新名称
           },
         },
       },
     ],
   };

3. **引用视频**：在 HTML 或 JavaScript 中，你可以像引用普通图片一样引入视频，Webpack 会在打包时自动处理路径：

   <video controls>
     <source src="./videos/my-video.mp4" type="video/mp4">
     Your browser does not support the video tag.
   </video>