Loading external shader file for Webgl

Hi,

A part of my app use Webgl (with shaders). I would like to load my shader files in my bundle (instead of write shaders as string inside the JS files). So I wrote an a file named shader.vert which contains

attribute vec4 a_position;
attribute vec2 a_texcoord;

uniform mat4 u_matrix;

varying vec2 v_texcoord;
 
void main() {
  gl_Position = u_matrix * a_position;
  v_texcoord = a_texcoord;
}

Then I try to load it in an other file

import vert from './shader.vert';
console.log(vert);   

but I get this output instead of the original content of my file:

data:application/octet-stream;base64,YXR0cmlidXRlIHZlYzQgYV9wb3NpdGlvbjsKYX…A9IHVfbWF0cml4ICogYV9wb3NpdGlvbjsKICB2X3RleGNvb3JkID0gYV90ZXhjb29yZDsKfQo=

I’m not a very confortable with Webpack (and that’s why I love create-react-app). I mean I know that webpack use many “loaders” etc but I don’t really know how they work.

Should I eject and add custom loaders ? (all that I DONT want to do)

Or is there a way to import file as a simple string ? With .vert, .frag, .glsl or other extension ?

node@6.2.2
npm@3.9.5
react-scripts@0.8.5

Thanks

[arpu]

https://github.com/facebookincubator/create-react-app/issues/1944 this should wor disable the eslint ` /* eslint import/no-webpack-loader-syntax: off */ import * as fragmentShader from ‘!raw-loader!glslify-loader!../shaders/fragment.glsl’;

/* eslint import/no-webpack-loader-syntax: off */ import * as vertexShader from ‘!raw-loader!glslify-loader!../shaders/vertex.glsl’; `

[gaearon]

If you need it as a string, could you just write a JS file exporting a string?

export default `
attribute vec4 a_position;
attribute vec2 a_texcoord;
// ...
`;

In CRA’s setup, when you import an unrecognized file, you’ll get its URL (which may be a data URL when it’s small enough and inlined). This is useful for media files, but not useful for shaders.

Alternatively, you can npm run eject and then use any custom Webpack loaders (I think raw-loader might work for your use case).

I hope this helps!