如何在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'
声明加载器的方式不正确。您混合了两种方法来定义加载程序。
{
test: /.mp4$/,
use: 'file-loader?name=videos/[name].[ext]',
},
你能试试这个吗?
链接:https://webpack.js.org/concepts/loaders/
使用 Webpack5,属性属性已替换为 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加载器,但它只加载通过CSS添加的图像和视频。
PS:如果您找到了带有src属性的html标签的解决方案,可以将其与文件加载器一起使用,那就太好了。