Question

我正在使用webpack构建一个基本站点。只要图像，无聊和加载本地字体，一切都可以正常进行。我现在正尝试从本地文件加载视频，但是当我添加它时，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"
        }
      }
    ]
  }
};

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

Answer 1

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

从路径/目标/视频导入mp4；

并在源代码标签中将变量mp4用作src

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

1 个答案: