webpack-glsl-loader

1.0.1 verified Sat Apr 25 auth: no javascript maintenance

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.

Common errors

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

cause 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' }

error Cannot find module 'webpack-glsl' ↓

cause The loader package is not installed or not in node_modules.

fix

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

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

cause 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.

Warnings

gotcha Imported 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.

gotcha No 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.

deprecated Inline 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.

gotcha The 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.

gotcha The 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);

Install

npm install webpack-glsl-loader

yarn add webpack-glsl-loader

pnpm add webpack-glsl-loader

Imports

default
wrong
```
const shader = require('webpack-glsl-loader!./shader.glsl');
```
correct
```
import shader from './shader.glsl';
```
Use the configured loader in webpack config; inline require with loader prefix works but is deprecated.

webpack-glsl

wrong

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

correct

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

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

inline require
wrong
```
const shader = require('!webpack-glsl!./shader.glsl');
```
correct
```
const shader = require('./shader.glsl');
```
Inline loader prefix with '!' works but config-based approach is recommended.

Quickstart

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() { ... }