加载视频mp4的webpack loader

Question

如何在Webpack 4中使用加载器（loader）处理MP4视频格式，我尝试了以下代码：

       {
            test: /\.mp4$/,
            use: 'file-loader',
            loader: 'file-loader?name=videos/[name].[ext]',
        },

像这样导入

import pressButtonAnimated from './images/pressButtonAnimated.mp4'

但这对我不起作用，我收到一个错误 您可能需要一个适当的加载器来处理此文件类型。

但这个方法对我有效，但我不想在每个文件中都添加它

import pressButtonAnimated from '-!file-loader!./images/pressButtonAnimated.mp4'

- Palaniichuk Dmytro

Answer 1

您声明加载器的方式不正确。您混合了两种定义加载器的方法。

 {
        test: /\.mp4$/,
        use: 'file-loader?name=videos/[name].[ext]',
 },

请尝试一下。

链接： https://webpack.js.org/concepts/loaders/

- Daniel

Answer 2

使用Webpack5，属性属性被替换为sources。

我们可以像这样使用file-loader，以便我们可以给它选项名称和路径。

{
    test: /\.mp4$/,
    use: [
        {
            loader: "file-loader",
            options: {
                name: "[name].[ext]",
                outputPath: "video"
            }
        }
    ]
}

如果你在 HTML 中写入视频标签，还有一些原因

<video class="">
    <source src="video/video.mp4" type="video/mp4">
</video>

在webpack中无法加载，但我们可以使用html-loader如下所示

{
    test: /\.html$/,
    exclude: /node_modules/,
    use: [
        {
            loader: "html-loader",
            options: {
                sources: {
                    list: [
                        {
                            tag: "source",
                            attribute: "src",
                            type: "src"
                        }
                    ]
                }
            }
        }
    ]
}

我们也可以使用url-loader，但它只加载通过CSS添加的图片和视频。

附注：如果您找到了一种解决方案，可以将带有src属性的HTML标记与file-loader一起使用，那就太好了。

- DevHub