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]' }}