{"id":20771,"library":"webpack-glsl-minify","title":"webpack-glsl-minify","description":"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.","status":"active","version":"1.5.0","language":"javascript","source_language":"en","source_url":"https://github.com/leosingleton/webpack-glsl-minify","tags":["javascript","typescript"],"install":[{"cmd":"npm install webpack-glsl-minify","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-glsl-minify","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-glsl-minify","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required as loader; tested with webpack 4 and 5","package":"webpack","optional":false}],"imports":[{"note":"TypeScript type import; correct for type assertions on loaded GLSL modules","wrong":"const { GlslShader } = require('webpack-glsl-minify')","symbol":"GlslShader","correct":"import { GlslShader } from 'webpack-glsl-minify'"},{"note":"This package exports a loader function by default; not meant to be directly imported in application code. Use via webpack config.","wrong":"import GlslLoader from 'webpack-glsl-minify'","symbol":"default (loader function)","correct":"module.exports = { module: { rules: [{ test: /\\.glsl$/, use: 'webpack-glsl-minify' }] } }"},{"note":"Named export; type for uniform/constant variable descriptors","wrong":"import GlslVariable from 'webpack-glsl-minify'","symbol":"GlslVariable","correct":"import { GlslVariable } from 'webpack-glsl-minify'"},{"note":"Type export; no nested type path","wrong":"import { GlslVariableMap } from 'webpack-glsl-minify/types'","symbol":"GlslVariableMap","correct":"import { GlslVariableMap } from 'webpack-glsl-minify'"}],"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.glsl$/,\n        use: 'webpack-glsl-minify'\n      }\n    ]\n  },\n  resolve: {\n    extensions: ['.glsl']\n  }\n};\n\n// src/myshader.glsl\n@define PI 3.14159\nuniform vec2 u_resolution;\nvoid main() {\n  vec2 pos = gl_FragCoord.xy / u_resolution;\n  float color = sin(pos.x * PI);\n  gl_FragColor = vec4(color, 0.0, 0.0, 1.0);\n}\n\n// src/index.js\nimport { GlslShader } from 'webpack-glsl-minify';\nimport shader from './myshader.glsl';\n\nconst glsl = shader as GlslShader;\nconsole.log(glsl.sourceCode);\nconsole.log(glsl.uniforms);\nconsole.log(glsl.consts);\n\n// Or with require:\nconst shader2 = require('./myshader.glsl');\nconsole.log(shader2.sourceCode);\nconsole.log(shader2.uniforms);\nconsole.log(shader2.consts);","lang":"javascript","description":"Webpack configuration to load .glsl files with the loader, plus example usage with TypeScript type assertions and require."},"warnings":[{"fix":"Access the source code via the 'sourceCode' property: const glsl = require('./shader.glsl'); console.log(glsl.sourceCode);","message":"Since version 1.0.0, the loader returns an object with sourceCode, uniforms, and consts instead of a plain string.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Use @define for value substitution; consider using #ifdef in GLSL if you need conditional compilation at shader compile time.","message":"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.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Use Webpack 5 and ensure compatibility with the loader options.","message":"Support for Webpack 4 is deprecated; the loader may not work with future versions.","severity":"deprecated","affected_versions":">=1.5.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: { test: /\\.glsl$/, use: 'webpack-glsl-minify' } and include .glsl in resolve.extensions.","cause":"Webpack is not configured to process .glsl files.","error":"Module parse failed: Unexpected token (1:0)\nYou may need an appropriate loader to handle this file type."},{"fix":"Upgrade to the latest version of webpack-glsl-minify (>=1.0.0) and access glsl.sourceCode.","cause":"The loaded GLSL module does not have a 'sourceCode' property, possibly because an older version of the loader returned a string.","error":"TypeError: Cannot read properties of undefined (reading 'sourceCode')"},{"fix":"Use static import or require with a string literal: import shader from './myshader.glsl' or const shader = require('./myshader.glsl').","cause":"Using dynamic require() on .glsl files in a way that webpack cannot resolve statically.","error":"Critical dependency: require function is used in a way in which dependencies cannot be statically extracted"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}