{"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,"search_vec":"'-05':34 '1.5.0':31 '2023':33 'altern':60 'automat':51 'class':43 'comment':20 'compil':47 'compile-tim':46 'const':15 'current':28 'defin':14 'definit':59 'differenti':40 'direct':17 'file':9 'first':42 'first-class':41 'float':24 'focus':63 'glsl':3,8 'glslifi':62 'includ':13 'inclus':66 'integr':45 'interoper':56 'javascript':55,72 'key':39 'like':61 'loader':6 'maintain':35 'mangl':27 'map':53,71 'minif':19,68 'minifi':4 'modul':65 'nomangl':16 'preprocess':12,49 'provid':11 'regular':37 'releas':32,38 'remov':21 'ship':57 'shorten':25 'strip':23 'symbol':26 'time':48 'typescript':58,73 'uniform':70 'uniform/constant':52 'version':29 'webpack':2,5,44 'webpack-glsl-minifi':1 'whitespac':22 'without':67","created_at":"2026-04-25T11:24:53.820863+00:00","updated_at":"2026-04-25T11:24:53.820863+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/leosingleton/webpack-glsl-minify","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/webpack-glsl-minify","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}