GLSL 文件：“模块解析失败：意外令牌”

Question

I am building image transition with a custom shader and for this i need a fragment.glsl. But when importing this file into my .js, this error shows up:

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 () {
| 
| }

For a fast start i am using this webpack boilerplate: https://github.com/taniarascia/webpack-boilerplate

Because of my not existing experience in webpack and glsl files i dont know whats wrong. I am assuming, that the browser is not able to read the file. I tried a lot of stuff with webpack.config.js and modules like glfl-loader but looks like my browser got other plans.

Answer 1

After testing around i found the solution:

i had to edit this to the webpack.config.js

// Shader

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