glslify-loader

2.0.0 verified Sat Apr 25 auth: no javascript maintenance

Webpack loader for glslify that inlines GLSL #include and source transforms. Current stable version 2.0.0, released 2018-05, no recent updates. Part of the stackgl ecosystem. Requires raw-loader to emit a string. Limited to webpack 4 and below; not compatible with webpack 5's asset modules. Alternatives: vite-plugin-glslify.

Common errors

error Module not found: Error: Can't resolve 'glslify-loader' ↓

cause glslify-loader is not installed or not resolved in webpack's module paths.

fix

Run 'npm install glslify-loader' and ensure webpack configuration includes node_modules in resolve.modules.

error Error: glslify-loader: 'raw-loader' must be placed before this loader in the chain. ↓

cause The loader order is reversed; raw-loader should be first.

fix

Reorder loaders so 'raw-loader' comes before 'glslify-loader' in the use array.

error TypeError: loader option 'query' is deprecated ↓

cause Using 'query' property in webpack 4+ loader configuration.

fix

Replace 'query' with 'options' in the loader object.

error Error: Could not locate a Glslify transform 'glslify-hex' ↓

cause The specified transform package is not installed.

fix

Install the transform package: 'npm install glslify-hex'.

Warnings

breaking glslify-loader is not compatible with webpack 5. Use raw-loader with webpack 5 or migrate to a different loader. ↓

fix Downgrade to webpack 4 or use an alternative like vite-plugin-glslify.

breaking raw-loader is required before glslify-loader; omitting it causes the loader to receive a JavaScript module object instead of raw GLSL text. ↓

fix Add 'raw-loader' before 'glslify-loader' in the loader chain.

deprecated The 'query' option is deprecated in webpack 4; use 'options' instead. ↓

fix Replace 'query' property with 'options' in loader configurations.

gotcha Source transforms (e.g., glslify-hex) must be installed separately; they are not bundled with glslify-loader. ↓

fix Install required transforms via npm and list them in the loader options.

gotcha ESM import syntax for glsl files requires webpack 2+ and proper module rules; simple require('file.glsl') works in Node but not webpack. ↓

fix Use webpack's import syntax within a webpack-bundled project; do not run the file directly with Node.

Install

npm install glslify-loader

yarn add glslify-loader

pnpm add glslify-loader

Imports

glslify-loader

wrong

const source = require('glslify-loader!./shader.glsl')

correct

import source from 'raw-loader!glslify-loader!./shader.glsl'

Must be used as a webpack loader, not a direct import. Use inline syntax or webpack config.

glslify-loader (config)

wrong

module.exports = { module: { rules: [ { test: /\.glsl$/, loader: 'glslify-loader' } ] } }

correct

module.exports = { module: { rules: [ { test: /\.(glsl|vs|fs|vert|frag)$/, use: ['raw-loader', 'glslify-loader'] } ] } }

Always include raw-loader before glslify-loader, or chain them properly.

options

wrong

use: [ 'raw-loader', { loader: 'glslify-loader', query: { transform: [...] } } ]

correct

use: [ 'raw-loader', { loader: 'glslify-loader', options: { transform: [['glslify-hex', {}]] } } ]

Use 'options' (webpack 4+); 'query' is deprecated.

Quickstart

Webpack configuration and example GLSL file using glslify-loader with a source transform, then importing the resolved shader string.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(glsl|vs|fs|vert|frag)$/,
        exclude: /node_modules/,
        use: [
          'raw-loader',
          'glslify-loader'
        ]
      }
    ]
  }
};

// my-shader.glsl
#version 300 es
precision highp float;
#pragma glslify: noise = require('glsl-noise/simplex/3d')
out vec4 outColor;
uniform vec3 pos;
void main() {
  float n = noise(pos);
  outColor = vec4(vec3(n), 1.0);
}

// app.js
import source from './my-shader.glsl';
console.log(source); // string containing resolved GLSL