浏览器不显示 MP4 @webpack-dev-server @React.js @JS

Question

我在没有 CRA 的 Visual Studio Pro 22 中开始了一个新的 React.js 项目。我的反应组件准确呈现（减去本地 .mp4 文件）。 .mp4 文件包含在视频元素内，在我的主要组件内的 div 内。 Edge 开发人员工具显示视频元素和 .mp4 文件（由 webpack 捆绑）。但是，.mp4 文件不会在浏览器中播放或显示。我收到这个错误。本地主机/:1

   GET http://localhost:8080/preview net::ERR_ABORTED 404 (Not Found)

这是我的 webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
},
    resolve: {
        modules: [path.join(__dirname, 'src'), 'node_modules'],
        alias: { react: path.join(__dirname, 'node_modules', 'react') }
    },
    plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
    module: {
        rules: [
            {
                test: /\.css/i,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:
                {
                 loader: "babel-loader",
                 options:
                    {
                        presets: ['@babel/preset-env', '@babel/preset-react']
                    }
                }
            },
            {
                test: /\.(png|mp4)$/i,
                type: "asset/resource"
            },
            {
                test: /\.txt$/i,
                type: 'asset/source'
            },
            {
                test: /\.(woff|woff2|ttf)$/i,
                type: "asset/resource"
            },
            {
                test: /\.html$/,
                use: ["html-loader"]
            }

          ]
       }
   }

这是我的 package.json

{
  "name": "tascticnodes",
  "version": "0.0.0",
  "description": "tascticnodes",
  "main": "index.js",
  "author": "",
  "presets": 
  [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "scripts": 
  {
  "build": "webpack --watch",
  "start": "webpack serve"
  },
  "keywords": [],
  "license": "ISC",
  "devDependencies": 
  {
   "@babel/core": "^7.16.5",
   "@babel/preset-env": "^7.16.5",
   "@babel/preset-react": "^7.16.5",
   "babel-loader": "^8.2.3",
   "css-loader": "^6.5.1",
   "file-loader": "^6.2.0",
   "html-loader": "^3.1.0",
   "html-webpack-plugin": "^5.5.0",
   "style-loader": "^3.3.1",
   "webpack": "^5.65.0",
   "webpack-cli": "^4.9.1",
   "webpack-dev-server": "^4.6.0"
  },
  "dependencies": 
  {
   "@aws-amplify/ui-react": "^2.1.5",
   "aws-amplify": "^4.3.11",
   "bootstrap": "^5.1.3",
   "react": "^17.0.2",
   "react-bootstrap": "^2.0.4",
   "react-dom": "^17.0.2",
   "typewriter-effect": "^2.18.2"
 }
}

这是我的 config.babelrc

{
  "presets": ["@babel/preset-env, "@babel/preset-react"]
}

这是我的 SRC 目录 screen shot of my directory

这是我的passIt.js（标准app.js）

import React from 'react';
import Typewriter from 'typewriter-effect';
import './index.css';
import Amplify from 'aws-amplify';
import { API } from 'aws-amplify';
import { Button, Form } from 'react-bootstrap';
import preview from './preview.mp4';
import awsExports from './aws-exports';
Amplify.configure(awsExports);


async function addContact() 
{
  const data = 
              {
               body: 
                    {
                     name: formState.name,
                     email: formState.email,
                     message: formState.message
                    }
              }
  console.log(data);

  const apiData = await API.post('formapi', '/items', data);
  console.log({ apiData });
  alert('Mail sent');
};

const formState = { name: '', email: '', message: '' };

function updateFormState(key, value) 
{
  formState[key] = value;
};

const Hello = () => {
    return (
        <div>
            <div>
                <div>
                    <form>
                        <Typewriter
                            onInit={(typewriter) =>
                            typewriter
                            .typeString('Welcome to Anvil')
                            .start()} />
                    </form>
                    <Form>
                        <Form.Group>
                            <Form.Label>Name</Form.Label>
                            <Form.Control placeholder="Name" onChange={e => 
                                             updateFormState('name', e.target.value)} />
                        </Form.Group>
                        <Form.Group>
                            <Form.Label>Email</Form.Label>
                            <Form.Control placeholder="Email" onChange={e => 
                                            updateFormState('email', e.target.value)} />
                        </Form.Group>
                        <Form.Group>
                            <Form.Label>Message</Form.Label>
                            <Form.Control placeholder="Message" onChange={e => 
                                          updateFormState('message', e.target.value)} />
                        </Form.Group>
                        <Button onClick={addContact}>Send a message</Button>
                    </Form>
                </div>
            </div>

            <video autoPlay muted loop>
                <source src="preview" type="video/mp4" />
            </video>

        </div>
    )
};



export default Hello;

这是我的 index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Check my divs</title>
        <link href="index.css" rel="stylesheet" type="text/css">
        <link C:\Users\zack\source\repos\tascticnodes\src\preview.mp4 />
    </head>
  <body id="body">
    <div id="root"></div>
  </body>
</html>

这是我的 index.js

import React from 'react';
import { render } from 'react-dom';
import Hello from './passIt';

render(<Hello />, document.getElementById('root'));

Answer 1

在 webpack.config.js

中指定输出文件名

查看Wepback Documentation：file-loader
加载程序应该如下所示：

`

{
  test: /\.(mov|mp4)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]'
      }  
    }
  ]
}

`

看看这个帖子：

浏览器不显示 MP4 @webpack-dev-server @React.js @JS

Browser not displaying MP4 @webpack-dev-server @React.js @JS

javascript

reactjs

webpack

browser

mp4