glsl-module-loader

A loader for webpack that allows parse glsl what is contain #include <./utils.glsl>.

• #include <./utils.glsl>
• #include <./utils>
• #include <glsl-noise/simplex/3d>
• #include <glsl-noise/simplex/3d.glsl>

Getting Started

To begin, you'll need to install glsl-module-loader:

$ npm install glsl-module-loader raw-loader -D

or

$ yarn add glsl-module-loader raw-loader -D

Then add the loader to your webpack config. For example:

file.js

import glsl from './file.glsl';

webpack.config.js

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.glsl$/i,
        use: [
          'raw-loader',
          'glsl-module-loader',
        ],
      },
    ],
  },
};

you also can use glsl-module-loader with glslify-loader:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.glsl$/i,
        use: [
          'raw-loader',
          'glslify-loader',
          'glsl-module-loader',
        ],
      },
    ],
  },
};

And run webpack via your preferred method.

Examples

project

• glsl-module-loader-example

Inline

import glsl from 'glsl-module-loader!./utils.glsl';