Question

我刚刚创建了laravel项目，预设了反应并配置了json文件以包含

"babel": {
        "presets": [
            "@babel/preset-env",
            "@babel/preset-react"
        ],
        "plugins": [
            "@babel/plugin-proposal-class-properties"
        ]
    },

"dependencies": {
        "@babel/plugin-proposal-class-properties": "^7.4.4",
        "react-router-dom": "^5.0.1"
    }

一切正常，直到我尝试在react组件中导入视频。如果我出现错误

Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

然后我尝试将mp4视频加载器添加到我的webpack.min.js中，但还是一无所获

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

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

loaders: [{
    test: /\.html$/,
    loader: 'html-loader?attrs[]=video:src'
}, {
    test: /\.mp4$/,
    loader: 'url-loader?limit=10000&mimetype=video/mp4'
}]

我也尝试导入图像，但是效果很好，看来问题仅在导入视频时仍然存在

如果需要完整的package.json：

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "babel": {
        "presets": [
            "@babel/preset-env",
            "@babel/preset-react"
        ],
        "plugins": [
            "@babel/plugin-proposal-class-properties"
        ]
    },
    "devDependencies": {
        "@babel/core": "^7.4.5",
        "@babel/preset-env": "^7.4.5",
        "@babel/preset-react": "^7.0.0",
        "axios": "^0.18",
        "babel-loader": "^8.0.6",
        "bootstrap": "^4.1.0",
        "cross-env": "^5.1",
        "file-loader": "^4.0.0",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "style-loader": "^0.23.1",
        "webpack": "^4.35.0",
        "webpack-cli": "^3.3.5",
        "webpack-dev-server": "^3.7.2"
    },
    "dependencies": {
        "@babel/plugin-proposal-class-properties": "^7.4.4",
        "react-router-dom": "^5.0.1"
    }
}

如何像这样导入视频

import vid from '../../../../public/assets/video.mp4';

模块解析失败：在React，Laravel项目中导入mp4时出现意外字符''（1：0）

0 个答案: