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

【问题标题】：Importing GLSL Shaders in NextJS – How do I check if the Webpack loaders work?在 NextJS 中导入 GLSL 着色器——如何检查 Webpack 加载器是否工作？
【发布时间】：2021-10-27 12:54:08
【问题描述】：

我正在尝试在我的 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 加载器是否正常工作。
有什么想法可以让我的导入工作吗？

【问题讨论】：

标签： webpack next.js glsl

【解决方案1】：

如果你下载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;
    }
};

【讨论】：