在 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 的經驗也很少。 我嘗試了不同的加載器（如 glsl-shader-loader 和 shader-loader），結果都一樣。 根據我收集到的信息，錯誤應該在 Webpack 和 NextJS 的交集處。 因此我的兩個問題：

1. 如何檢查 Webpack 加載程序是否有效。
2. 有什么想法可以讓我的導入工作嗎？

Answer 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;
  },
};

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

請注意 .frag、.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