{"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,"search_vec":"'1.3.1':22 '2':32 '2/3':73 '2017':25 '3':34 '4':37 'activ':27 'allow':46 'cabbibo':60 'chunk':50,79 'chunk/inclusion':17 'current':20 'develop':28 'differenti':38 'direct':54 'file':10 'fs':13 'glsl':8,11,49,75 'glslifi':44 'includ':52 'inclus':47 'inspir':58 'javascript':74 'last':23 'legaci':65 'loader':3,6,42,77 'project':66 'raw':41 'raw-load':40 'shader':2,9,16,56,78 'shader-load':1 'shaderload':62 'similar':70 'sourc':57 'suitabl':63 'support':15 'syntax':18,53 'three.js':68 'updat':24 'use':67 'version':21 'via':51 'vs':12 'webpack':5,31,36,72,76 'work':29 'xxx':19","created_at":"2026-04-25T11:23:42.154474+00:00","updated_at":"2026-04-25T11:23:42.154474+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/Makio64/shader-loader","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/shader-loader","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"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}}