在NextJS中导入GLSL着色器 – 如何检查Webpack加载器是否工作？

Question

我正在尝试在我的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也没有更多的经验。我尝试过不同的加载器(如glass -shader-loader和shader-loader)，都有相同的结果。从我收集到的，错误应该在Webpack和NextJS的交集。因此我有两个问题:

1. 如何检查Webpack加载器是否工作
2. 有什么想法我可以让我的进口工作吗?

Answer 1

如果你安装了glslify-loader并将其推送到rules

/** @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;
}
};

Answer 2

您不需要加载器。以下是您应该使用的配置:

/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
webpack: (config) => {
config.module.rules.push({
test: /.(frag|vert)$/,
type: 'asset/source'
})
return config
}
}
module.exports = nextConfig

注意. rag， .vert文件扩展名。

Answer 3

我无法获得任何glslify-loader与next.config.js一起工作，但使用内联import/require语句效果很好，如:

// Using ES6 import statement
import source from 'raw-loader!glslify-loader!./public/shaders/blob/vertex.glsl'
// Using require
const source = require('raw-loader!glslify-loader!./public/shaders/blob/vertex.glsl')

可以在这里的glslify-loader README中看到。md https://github.com/glslify/glslify-loader