如何解决NEXTJS - 如何加载 webm、mp4 文件?
我正在使用 NextJS,我的网站上有一些 webm、mp4 文件,我想显示它。不知何故,每次我尝试构建或启动下一个开发时,我都会收到此错误。我尝试使用 withVideos、webpack4、file-loader、url-loader,但没有按预期工作。
info - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
info - Checking validity of types
info - Creating an optimized production build
Failed to compile.
./assets/media/video/feature1.webm
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)
> Build error occurred
Error: > Build failed because of webpack errors
at /Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/build/index.js:17:924
at async Span.traceAsyncFn (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/telemetry/trace/trace.js:6:584)
error Command failed with exit code 1.
我的 next.config.js
const nextConfig = {
future: {
webpack5: true,},// distDir: "./dist/functions/next",webpack: (config,{ isServer,webpack }) => {
// Note: we provide webpack above so you should not `require` it
// Perform customizations to webpack config
config.plugins.push(new webpack.EnvironmentPlugin(process.env));
config.optimization.minimize = false;
config.module.rules.push(
{
test: /\.svg$/,issuer: {
test: /\.(js|ts)x?$/,use: ["@svgr/webpack"],{
test: /\.(mp4|webm|ogg|swf|ogv)$/,use: [
{
loader: "file-loader",options: {
publicPath: `./.next/static/videos/`,outputPath: `${isServer ? "../" : ""}static/videos/`,name: "[name]-[hash].[ext]",],}
);
// Important: return the modified config
return config;
},};
module.exports = withPlugins(
[
withImages({
webpack(config,options) {
return config;
},}),nextConfig
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。