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 。