Webpack 和 GLSL 着色器

Question

我正在 Sage Wordpress 网站上工作，想通过Three.js库实现一些 WebGl。 像这样的代码丢弃示例图像 hover

我一直遇到 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.scss

Answer 1

取自这里： https://www.npmjs.com/package/webpack-glsl-loader

安装这个加载器：

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

并将其添加到您的 webpack 配置中：

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

然后像你一样简单地导入fragment.glsl 。