Существует ли специальная конфигурация для локального использования видео (.mov, .mp4) и Webpack с «загрузчиком файлов»? - PullRequest
Новая
       9

Существует ли специальная конфигурация для локального использования видео (.mov, .mp4) и Webpack с «загрузчиком файлов»?

0 голосов
/ 10 мая 2019

Я использую веб-пакет для создания базового сайта.Все работает, насколько изображения, sass и загрузка локальных шрифтов идет.Я сейчас пытаюсь загрузить видео из локального файла, однако, когда я иду, чтобы добавить его, веб-пакет выдает ошибку 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

1 Ответ

0 голосов
/ 28 мая 2019

У src, указанного в вашем исходном теге, нет части hash, которую вы настроили в параметре загрузчика файлов: вы должны заменить путь на оператор импорта:

импорт mp4 из path / to / video ;

и используйте переменную mp4 в качестве источника в теге источника

...