{"id":20547,"library":"shader-loader","title":"shader-loader","description":"A Webpack loader for GLSL shader files (.glsl, .vs, .fs) that supports shader chunk/inclusion syntax ($xxx). Current version 1.3.1, last updated 2017, no active development. Works with Webpack 2 and 3 (not Webpack 4+). Differentiates from raw-loader or glslify by allowing inclusion of GLSL chunks via $include syntax directly in shader source, inspired by cabbibo's ShaderLoader. Suitable for legacy projects using Three.js or similar with Webpack 2/3.","status":"maintenance","version":"1.3.1","language":"javascript","source_language":"en","source_url":"https://github.com/Makio64/shader-loader","tags":["javascript","glsl","webpack","loader","shader","chunks"],"install":[{"cmd":"npm install shader-loader","lang":"bash","label":"npm"},{"cmd":"yarn add shader-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add shader-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Webpack loader; compatible with Webpack 2 and 3 only.","package":"webpack","optional":false}],"imports":[{"note":"ESM import works with Webpack 2/3 + babel or TypeScript; require works in CJS context.","wrong":"const vertexShader = require('shader.vs');","symbol":"default","correct":"import vertexShader from 'shader.vs';"},{"note":"Options are required for chunk resolution; without chunkPath, $include will fail.","wrong":"module.exports = { module: { rules: [ { test: /\\.glsl$/, loader: 'shader-loader' } ] } };","symbol":"none (loader)","correct":"module.exports = { module: { rules: [ { test: /\\.(glsl|vs|fs)$/, loader: 'shader-loader', options: { glsl: { chunkPath: 'path/to/chunks' } } } ] } };"},{"note":"Uses $filename syntax, not C-style #include. File must be in chunkPath directory.","wrong":"void main() { #include \"noise.glsl\" }","symbol":"none (chunk syntax)","correct":"void main() { $noise }"}],"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\nmodule.exports = {\n  entry: './src/index.js',\n  output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' },\n  module: {\n    rules: [\n      {\n        test: /\\.(glsl|vs|fs)$/,\n        loader: 'shader-loader',\n        options: {\n          glsl: {\n            chunkPath: path.resolve(__dirname, 'glsl/chunks')\n          }\n        }\n      }\n    ]\n  }\n};\n\n// src/vertex.vs\nvoid main() { gl_Position = vec4(position, 1.0); }\n\n// src/index.js\nimport vertexShader from './vertex.vs';\nconsole.log(vertexShader);","lang":"javascript","description":"Sets up Webpack config to load .glsl/.vs/.fs files with shader-loader, including chunk path. Then imports a vertex shader in JavaScript."},"warnings":[{"fix":"Use raw-loader or glslify for Webpack 4+; or stick with Webpack 2/3.","message":"Incompatible with Webpack 4+ due to loader API changes.","severity":"breaking","affected_versions":">=1.3.1"},{"fix":"Consider migrating to glslify, raw-loader, or webpack-glsl-loader.","message":"Package has not been updated since 2017 and is no longer maintained.","severity":"deprecated","affected_versions":"all"},{"fix":"Set chunkPath in options and ensure chunk files (e.g., noise.glsl) exist there.","message":"Shader chunks must be placed in the configured chunkPath directory; otherwise $include will silently fail.","severity":"gotcha","affected_versions":"all"},{"fix":"Use appropriate version of webpack (2.x or 3.x).","message":"The loader only supports Webpack 2 and 3; not tested with Webpack 1.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure webpack config includes { test: /\\.(glsl|vs|fs)$/, loader: 'shader-loader' } and loader is installed.","cause":"Shader file is not being processed by shader-loader; webpack config missing or incorrect rule.","error":"Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type."},{"fix":"Create the chunk file (e.g., snoise.glsl) in the directory specified by chunkPath option.","cause":"Chunk include ($snoise) cannot find the file in the specified chunkPath.","error":"ERROR in ./src/shader.vs Module build failed: Error: ENOENT: no such file or directory, open '.../glsl/chunks/snoise.glsl'"},{"fix":"Downgrade to webpack@3 or use an alternative loader like raw-loader.","cause":"Trying to use shader-loader with Webpack 4 or 5.","error":"throw new Error('shader-loader only supports webpack 2 and 3');"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}