Ok, so this was slightly confusing. Setting up glslify with webpack can be a little tricky and depending on your setup there can be some unexpected quirks - at least there was for me. While trying to get glslify to play nicely with my webpack config I ran into several issues and depending on your setup they seem to flip around. So, to get a handle on how to get this all working correctly I stripped everything right back to a bare bones setup and tried a couple of suggested webpack loaders and babel plugins, some of which appear to be out of date and awaiting fixes. Overall the process hasn't been exactly smooth or encouraging so hopefully this repo helps out the next person who finds themselves struggling.
This repo covers three somewhat basic approaches to incorporating glslify with a webpack setup. They cover the following:
- babel-plugin-glslify - uses babel
- glslify-loader - an older webpack loader which doesn't seem to be recommended anymore
- ify-loader - a newer browserify based loader for webpack
Each of the above approaches are explored in a seperate workspace:
Below is a summary table outlining at a high-level what works with which setup. Jump into each workspace and run the respective commands to view the output in a browser as well as any compiler errors.
| Workspace | Method | File | Works? |
|---|---|---|---|
| test-babel-plugin-glslify | glslify`` |
glsl-inline.js | ½ |
| test-babel-plugin-glslify | glslify('./file.glsl') |
glsl-file.js | ✔ |
| test-babel-plugin-glslify | glslify(/* shader string */) |
glsl-import.js | ✘ |
| test-glslify-loader | glslify`` |
glsl-inline.js | ✘ |
| test-glslify-loader | glslify('./file.glsl') |
glsl-file.js | ✘ |
| test-glslify-loader | glslify(/* shader string */) |
glsl-import.js | ✔ |
| test-ify-loader | glslify`` |
glsl-inline.js | ✔ |
| test-ify-loader | glslify('./file.glsl') |
glsl-file.js | ✔ |
| test-ify-loader | glslify(/* shader string */) |
glsl-import.js | ✘ |
In summary the ify-loader is definitely the best choice. However, if you are using babel then you will want to use the babel-plugin-glslify babel plugin but you will need to be careful not to use tagged template literals that contain variables (I'm still working out why Babel is concatinating these and if that's the exact issue here).
If you have Nodejs > 8.9 and Yarn installed you can use the following:
git clone git@github.com:chasevida/glslify-webpack.git
cd glslify-webpack
yarn install
To run examples in any of the three workspaces change directory into one and then run one of the following three commands:
cd <workspace>
yarn start:babel-glslify
yarn start:glslify-loader
yarn start:ify-loader