加载视频 mp4 webpack 加载器
Load video mp4 webpack loader
如何使用 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]',
},
你能试试这个吗
在 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-loader 但它只会加载通过 css 添加的图像和视频。
PS: 如果您找到 html 带有 src 属性的标签的解决方案以将其与文件加载器一起使用,那就太好了。
如何使用 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]',
},
你能试试这个吗
在 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-loader 但它只会加载通过 css 添加的图像和视频。
PS: 如果您找到 html 带有 src 属性的标签的解决方案以将其与文件加载器一起使用,那就太好了。