{"id":20770,"library":"webpack-glsl-loader","title":"webpack-glsl-loader","description":"A webpack loader for GLSL shader files, supporting nested imports for code reuse. Version 1.0.1 is the latest stable release; the project appears low-activity with no recent updates. It integrates GLSL shaders into webpack bundles by returning the shader as a string, with a SASS-like @import syntax for modular shader development. Differentiators include simple inline import resolution and no additional runtime dependencies, though it lacks deduplication and error checking for imports. Suitable for webpack 1–4 projects requiring WebGL shader inclusion.","status":"maintenance","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/grieve/webpack-glsl-loader","tags":["javascript","glsl","shader","webgl","webpack","loader","import","include"],"install":[{"cmd":"npm install webpack-glsl-loader","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-glsl-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-glsl-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for loader functionality","package":"webpack","optional":false}],"imports":[{"note":"Use the configured loader in webpack config; inline require with loader prefix works but is deprecated.","wrong":"const shader = require('webpack-glsl-loader!./shader.glsl');","symbol":"default","correct":"import shader from './shader.glsl';"},{"note":"webpack 2+ uses rules and use; 'loader' property (v1) is deprecated.","wrong":"module.exports = { module: { loaders: [ { test: /\\.glsl$/, loader: 'webpack-glsl' } ] } };","symbol":"webpack-glsl","correct":"module.exports = { module: { rules: [ { test: /\\.glsl$/, use: 'webpack-glsl' } ] } };"},{"note":"Inline loader prefix with '!' works but config-based approach is recommended.","wrong":"const shader = require('!webpack-glsl!./shader.glsl');","symbol":"inline require","correct":"const shader = require('./shader.glsl');"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.glsl$/,\n        use: 'webpack-glsl'\n      }\n    ]\n  }\n};\n\n// main.js\nimport fragmentShader from './fragment.glsl';\n// fragment.glsl\n// @import ./includes/perlin-noise;\n// void main() { ... }","lang":"javascript","description":"Configures webpack with glsl-loader, imports a shader, and uses @import for nested includes."},"warnings":[{"fix":"Manually deduplicate imports or avoid importing the same file in multiple places.","message":"Imported files do not have duplicate protection; importing the same file twice causes code duplication and potential runtime errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Test shaders as a single contiguous file before using imports.","message":"No error checking for imported files; syntax errors in imported shaders are not reported as loader errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use module.rules in webpack config as shown in quickstart.","message":"Inline require with loader prefix (e.g., require('webpack-glsl!./shader.glsl')) is deprecated in favor of config-based loaders.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Ensure webpack version compatibility; consider using glslify-loader for webpack 5.","message":"The loader only works with webpack 1–4; webpack 5 may require additional configuration or alternative loaders.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use the imported value as a string: gl.shaderSource(shader, fragmentShader);","message":"The returned shader is a string; it must be passed to WebGL's shaderSource() manually, not used as a module object.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add the loader rule to webpack.config.js: { test: /\\.glsl$/, use: 'webpack-glsl' }","cause":"webpack is not configured to handle .glsl files; the loader rule is missing or misconfigured.","error":"Module parse failed: Unexpected token (1:0)\nYou may need an appropriate loader to handle this file type."},{"fix":"Run: npm install --save-dev webpack-glsl-loader","cause":"The loader package is not installed or not in node_modules.","error":"Cannot find module 'webpack-glsl'"},{"fix":"Verify the import path relative to the shader file, and omit the .glsl extension in the @import statement.","cause":"An @import path is incorrect or the file does not exist.","error":"ERROR in ./shader.glsl\nModule build failed: Error: Couldn't find file for import: ./missing"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}