GLSL 文件：“模塊解析失敗：意外令牌”

Question

我正在使用自定義着色器構建圖像過渡，為此我需要一個 fragment.glsl。 但是當將此文件導入我的 .js 時，會出現此錯誤：

Compiled with problems:

ERROR in ./src/shaders/fragment.glsl 1:13

Module parse failed: Unexpected token (1:13)
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
> void main () {
| 
| }

為了快速開始，我正在使用這個 webpack 樣板： https ://github.com/taniarascia/webpack-boilerplate

由於我在 webpack 和 glsl 文件方面沒有經驗，我不知道出了什么問題。 我假設瀏覽器無法讀取該文件。 我用 webpack.config.js 和 glfl-loader 之類的模塊嘗試了很多東西，但看起來我的瀏覽器有其他計划。

Answer 1

經過四處測試，我找到了解決方案：

我不得不將它編輯到webpack.config.js

// 着色器

{ test: /\.(glsl|vs|fs|vert|frag)$/,  type: 'asset/source',generator: { filename: 'assets/images/[hash][ext]' }}