Шейдеры Webpack и GLSL

Question

Я работаю над сайтом Sage Wordpress и хочу реализовать некоторый WebGl через библиотеку Three. js. Как этот код отбрасывает пример наведения изображения

Я продолжаю сталкиваться с проблемами с файлами GLSL. Я пробовал несколько разных модулей загрузчика. Но у меня все те же ошибки. Кто-нибудь еще такое испытывал?

    ERROR Failed to compile with 4 errors 5:57:14 PM
error in ./resources/assets/scripts/routes/extras/shader/fragment.glsl

Module parse failed: Unexpected token (1:8)
You may need an appropriate loader to handle this file type.
| uniform float time;
| uniform float progress;
| uniform sampler2D texture1;

@ ./resources/assets/scripts/routes/three-test.js 11:0-53
@ ./resources/assets/scripts/main.js
@ multi ./resources/assets/build/util/…/helpers/hmr-client.js ./scripts/main.js

. / Styles / main.s css

Answer 1

Взято отсюда: https://www.npmjs.com/package/webpack-glsl-loader

Установите этот загрузчик:

npm install --save-dev webpack-glsl-loader

И добавьте его в конфигурацию вашего веб-пакета:

{
    module: {
        loaders: [
            {
                test: /\.glsl$/,
                loader: 'webpack-glsl'
            }
        ]
    }
}

, затем просто импортируйте fragment.glsl, как и вы.