webpack - 在 NextJS 中导入 GLSL 着色器——如何检查 Webpack 加载器是否工作?
问题描述
我正在尝试在我的 NextJS 应用程序中加载 GLSL 着色器。我已经像这样配置了我的 next.config.js:
module.exports = {
reactStrictMode: true,
images: {
domains: [
'localhost',
'backend.rolideluxe.ch'
]
},
webpack: ( config, {} ) => {
config.module.rules.push({
test: /\.mp4$/,
use: {
loader: 'file-loader'
}
})
config.module.rules.push({
test: /\.(glsl|vs|fs|vert|frag)$/,
use: {
loader: 'raw-loader'
}
})
return config
},
}
这将返回错误(底部是着色器的着色器开始)
./public/shaders/blob/vertex.glsl
Module parse failed: Unexpected token (2:8)
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
|
> uniform vec2 uFrequency;
我对 NextJS 和 ThreeJS 比较陌生,对 Webpack 的经验也很少。我尝试了不同的加载器(如 glsl-shader-loader 和 shader-loader),结果都一样。从我收集到的信息来看,错误应该在 Webpack 和 NextJS 的交集处。因此我的两个问题:
- 如何检查 Webpack 加载器是否有效。
- 有什么想法可以让我的导入工作吗?
解决方案
如果您下载glslify-loader
并将其推送到规则,您可以制作它
/** @type {import('next').NextConfig} */
module.exports = {
reactStrictMode: true,
webpack: (config, options) => {
config.module.rules.push({
test: /\.(glsl|vs|fs|vert|frag)$/,
use: ['raw-loader', 'glslify-loader'],
});
return config;
}
};
推荐阅读
- python - 如何在下拉列表中添加 json 键值?我希望项目(json 值)填充到下拉组合框_2
- rest - 哪些功能可通过 OpenText AppWorks REST API 获得?
- php - 在 TYPO3 中添加自定义字段时出现“未知列”错误?
- c# - 自定义相机预览的大小
- css - CSS 动画在异步请求期间“卡住”
- spring-boot - 使用 JPA @onetomany 和 @manytoone 注解将数据插入三个表
- ios - iOS - 在一个阅读会话中同时获取 NFCTag 硬件 ID 和 NDEF 消息
- ios - 是否可以/允许使用 iOS 作为蓝牙设备和云之间的网关(当应用程序在后台时)
- azure - Azure Logic App List Blob List_Blob 元数据字段值是什么
- c - Clang 是否误解了“const”指针说明符?