Registry / devops / webpack-glsl-loader

webpack-glsl-loader

library1.0.1jsnpmunverified

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.

devops

npm install webpack-glsl-loader

github ↗package ↗

INSTALL

IMPORT

SIG · WEBPACK-GLSL-LOADE

webpack-glsl-loader

devopsjavascriptv1.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import shader from './shader.glsl';

✗ const shader = require('webpack-glsl-loader!./shader.glsl');

Use the configured loader in webpack config; inline require with loader prefix works but is deprecated.

webpack-glsl

✓ module.exports = { module: { rules: [ { test: /\.glsl$/, use: 'webpack-glsl' } ] } };

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

webpack 2+ uses rules and use; 'loader' property (v1) is deprecated.

inline require

✓ const shader = require('./shader.glsl');

✗ const shader = require('!webpack-glsl!./shader.glsl');

Inline loader prefix with '!' works but config-based approach is recommended.

Configures webpack with glsl-loader, imports a shader, and uses @import for nested includes.

// webpack.config.js module.exports = { module: { rules: [ { test: /\.glsl$/, use: 'webpack-glsl' } ] } }; // main.js import fragmentShader from './fragment.glsl'; // fragment.glsl // @import ./includes/perlin-noise; // void main() { ... }

Debug

Known issues

gotchaImported files do not have duplicate protection; importing the same file twice causes code duplication and potential runtime errors.

fix

Manually deduplicate imports or avoid importing the same file in multiple places.

affects: >=1.0.0

gotchaNo error checking for imported files; syntax errors in imported shaders are not reported as loader errors.

fix

Test shaders as a single contiguous file before using imports.

affects: >=1.0.0

deprecatedInline require with loader prefix (e.g., require('webpack-glsl!./shader.glsl')) is deprecated in favor of config-based loaders.

fix

Use module.rules in webpack config as shown in quickstart.

affects: >=1.0.0

gotchaThe loader only works with webpack 1–4; webpack 5 may require additional configuration or alternative loaders.

fix

Ensure webpack version compatibility; consider using glslify-loader for webpack 5.

affects: >=1.0.0

gotchaThe returned shader is a string; it must be passed to WebGL's shaderSource() manually, not used as a module object.

fix

Use the imported value as a string: gl.shaderSource(shader, fragmentShader);

affects: >=1.0.0

Errors

Common errors & fixes

Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type.

webpack is not configured to handle .glsl files; the loader rule is missing or misconfigured.

fix

Add the loader rule to webpack.config.js: { test: /\.glsl$/, use: 'webpack-glsl' }

Cannot find module 'webpack-glsl'

The loader package is not installed or not in node_modules.

fix

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

ERROR in ./shader.glsl Module build failed: Error: Couldn't find file for import: ./missing

An @import path is incorrect or the file does not exist.

fix

Verify the import path relative to the shader file, and omit the .glsl extension in the @import statement.

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

webpackrequiredpeer dependency for loader functionality

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/grieve/webpack-glsl-loader ↗

packagehttps://www.npmjs.com/package/webpack-glsl-loader ↗