在 Laravel 8 和 reactjs 中使用 Webpack、Laravel Mix 無法加載視頻/mp4

Question

我是 Laravel 的新手，我正在嘗試使用 Laravel Mix 編譯和上傳我的視頻資源。

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .react()
    .sass('resources/sass/app.scss', 'public/css');

這是帶有反應的代碼前端

import React from 'react';
import Video from '../../videos/video.mp4';
import {HeroContainer, HeroBg, VideoBg} from './HeroElements';

const HeroSection = () => {
    return (
        <HeroContainer id="home">
            <HeroBg>
                <VideoBg autoPlay loop muted src={Video} type='video/mp4' />
            </HeroBg>
        </HeroContainer>
    )
}

export default HeroSection;

這是輸出和錯誤的結果

模塊解析失敗：意外字符 ' ' (1:0) 您可能需要合適的加載程序來處理此文件類型，目前沒有配置加載程序來處理此文件。 請參閱https://webpack.js.org/concepts#loaders （此二進制文件省略了源代碼）

Answer 1

如果您遇到以下屏幕截圖中的錯誤，請嘗試以下操作：

1. 安裝raw_loader模塊：

npm install raw-loader --save-dev

2. 在webpack.mix.js文件中，在捕獲所需文件的規則中使用raw_loader模塊：

const mix = require('laravel-mix');
mix.webpackConfig({ module: { rules: [{ test: /\.mp4$/i, use: 'raw-loader' }] } })
   .ts('resources/ts/app.ts', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

---

對於捕獲更多文件的正則表達式，您可以將其用作：

/\.(mp4|avi|pdf|mp3)$/i

---

使用raw_loader模塊之前發生的錯誤：

使用raw_loader模塊成功：

---

Ps：看起來您正在使用 React。 在我的示例中，我使用了 Vue.Js 3...但問題似乎與此無關。