8

如何使用 webpcak 4 加载 mp4 视频格式，我尝试这样：

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

并像这样导入

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

但这对我不起作用，并且出现错误You may need an appropriate loader to handle this file type.

但这对我有用，但我不想在每个文件中添加

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

2 回答 2

16

您声明加载程序的方式不正确。您正在混合两种方式来定义加载器。

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

你能试试这个吗？

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

于 2018-04-20T16:48:53.953 回答
2

在 Webpack5 中，attributes 属性已被替换为sources

我们可以像这样使用文件加载器，这样我们就可以给它选项名称和路径。

{
    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 添加的图像和视频。

PS：如果您找到了带有 src 属性的 html 标签的解决方案，可以将其与文件加载器一起使用，那就太好了。

于 2021-01-08T11:00:49.047 回答