时间戳

首页 > 解决方案 > 是否有在本地使用视频（.mov、.mp4）和带有“文件加载器”的 Webpack 的特殊配置？

webpack-dev-server - 是否有在本地使用视频（.mov、.mp4）和带有“文件加载器”的 Webpack 的特殊配置？

问题描述

我正在使用 webpack 构建一个基本站点。就图像、sass 和本地字体的加载而言，一切正常。我现在正在尝试从本地文件加载视频，但是当我添加它时，webpack 给了我一个 404 错误。任何人都可以帮助我进行配置，因为我似乎对视频有误。视频控件呈现，但视频本身不呈现。

HTML 代码

    <video controls width="600">
      <source src="./assets/images/hero_vid_bg_1.mp4" type="video/mp4">
      Sorry, your browser doesn't support embedded videos.
    </video>

Webpack 配置文件

module.exports = {
  entry: {
    main: "./src/index.js"
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: ["html-loader"]
      },
      {
        test: /\.(svg|png|jpg|gif|)$/,
        use: [{
          loader: "file-loader",
          options: {
            name: "[name].[hash].[ext]",
            outputPath: "./assets/images"
          }
        }]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        loader: "file-loader",
        options: {
          name: "[name].[hash].[ext]",
          outputPath: "./assets/fonts"
        }
      },
      {
        test: /\.(mov|mp4)$/,
        loader: "file-loader",
        options: {
          name: "[name].[hash].[ext]",
          publicPath: "./assets/images",
          outputPath: "./assets/videos"
        }
      }
    ]
  }
};

视频文件的绝对路径是 assets/images/hero_vid_bg.mp4

标签： webpack-dev-serverwebpack-4

解决方案

你的src源标签中指定的没有hash你在文件加载器选项中配置的部分，你应该用导入语句替换路径：

从path/to/video导入 mp4 ；

并在源标签中使用变量mp4作为 src

推荐阅读