如何修复 laravel mix 中的错误“模块解析失败：意外字符”答案

【问题标题】：How to fix Error "Module parse failed: Unexpected character" in laravel mix如何修复 laravel mix 中的错误“模块解析失败：意外字符”
【发布时间】：2021-12-23 04:35:06
【问题描述】：

我在 Laravel8 中使用 laravel-mix 编写 react 代码然后编译。

在正常使用中一切正常。但是当我想使用下面的行加载一个 mp4 文件时：

 require(`./files/${mp4file}`)

我在使用 laravel-mix by npm run dev 编译期间加载 mp4 文件时收到此错误：

ERROR in ./resources/files/5.mp4 1:0
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. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

webpack compiled with 1 error

注意：我在create-react-app 中有这个程序，它在build 和run 期间运行良好，没有问题。

我该如何解决这个错误？

【问题讨论】：

标签： reactjs laravel webpack laravel-8 laravel-mix

【解决方案1】：

一天后我找到了解决办法，

您需要构建您的自定义加载器。为此，我将此行添加到 webpack.mix.js:

mix.extend("addWebpackLoaders", (webpackConfig, loaderRules) => {
    loaderRules.forEach((loaderRule) => {
        webpackConfig.module.rules.push(loaderRule);
    });
});

mix.addWebpackLoaders([
    {
        test: /\.(mp4|svg|jpe?g|gif)$/,
        use: [
            { 
                loader: 'file-loader',            
            }
          ]
    }
]);

通过这种方式，您为mp4、svg、gif 等文件添加了file-loader。之后你可以运行npm run dev。

这个链接帮助了我： https://github.com/laravel-mix/laravel-mix/issues/145

【讨论】：