webpack-glsl-minify

1.5.0 verified Sat Apr 25 auth: no javascript

Webpack loader for GLSL files that provides preprocessing (include, define, const, nomangle directives) and minification (comment removal, whitespace stripping, float shortening, symbol mangling). Current version is 1.5.0, released 2023-05. Maintained with regular releases. Key differentiators: first-class Webpack integration, compile-time preprocessing, and automatic uniform/constant mapping for JavaScript interoperability. Ships TypeScript definitions. Alternatives like glslify focus on module inclusion without minification or uniform mapping.

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 process .glsl files.

fix

Add the loader rule: { test: /\.glsl$/, use: 'webpack-glsl-minify' } and include .glsl in resolve.extensions.

error TypeError: Cannot read properties of undefined (reading 'sourceCode') ↓

cause The loaded GLSL module does not have a 'sourceCode' property, possibly because an older version of the loader returned a string.

fix

Upgrade to the latest version of webpack-glsl-minify (>=1.0.0) and access glsl.sourceCode.

error Critical dependency: require function is used in a way in which dependencies cannot be statically extracted ↓

cause Using dynamic require() on .glsl files in a way that webpack cannot resolve statically.

fix

Use static import or require with a string literal: import shader from './myshader.glsl' or const shader = require('./myshader.glsl').

Warnings

breaking Since version 1.0.0, the loader returns an object with sourceCode, uniforms, and consts instead of a plain string. ↓

fix Access the source code via the 'sourceCode' property: const glsl = require('./shader.glsl'); console.log(glsl.sourceCode);

gotcha The @define directive performs compile-time constant substitution, but does not behave like GLSL #define. Use @define for simple text replacement; for conditional compilation, use a separate preprocessor. ↓

fix Use @define for value substitution; consider using #ifdef in GLSL if you need conditional compilation at shader compile time.

deprecated Support for Webpack 4 is deprecated; the loader may not work with future versions. ↓

fix Use Webpack 5 and ensure compatibility with the loader options.

Install

npm install webpack-glsl-minify

yarn add webpack-glsl-minify

pnpm add webpack-glsl-minify

Imports

GlslShader

wrong

const { GlslShader } = require('webpack-glsl-minify')

correct

import { GlslShader } from 'webpack-glsl-minify'

TypeScript type import; correct for type assertions on loaded GLSL modules

default (loader function)
wrong
```
import GlslLoader from 'webpack-glsl-minify'
```
correct
```
module.exports = { module: { rules: [{ test: /\.glsl$/, use: 'webpack-glsl-minify' }] } }
```
This package exports a loader function by default; not meant to be directly imported in application code. Use via webpack config.

GlslVariable

wrong

import GlslVariable from 'webpack-glsl-minify'

correct

import { GlslVariable } from 'webpack-glsl-minify'

Named export; type for uniform/constant variable descriptors

GlslVariableMap

wrong

import { GlslVariableMap } from 'webpack-glsl-minify/types'

correct

import { GlslVariableMap } from 'webpack-glsl-minify'

Type export; no nested type path

Quickstart

Webpack configuration to load .glsl files with the loader, plus example usage with TypeScript type assertions and require.

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.glsl$/,
        use: 'webpack-glsl-minify'
      }
    ]
  },
  resolve: {
    extensions: ['.glsl']
  }
};

// src/myshader.glsl
@define PI 3.14159
uniform vec2 u_resolution;
void main() {
  vec2 pos = gl_FragCoord.xy / u_resolution;
  float color = sin(pos.x * PI);
  gl_FragColor = vec4(color, 0.0, 0.0, 1.0);
}

// src/index.js
import { GlslShader } from 'webpack-glsl-minify';
import shader from './myshader.glsl';

const glsl = shader as GlslShader;
console.log(glsl.sourceCode);
console.log(glsl.uniforms);
console.log(glsl.consts);

// Or with require:
const shader2 = require('./myshader.glsl');
console.log(shader2.sourceCode);
console.log(shader2.uniforms);
console.log(shader2.consts);