Skip to content
Webpack loader to handle browserify transforms as intended.
JavaScript GLSL
Branch: master
Clone or download

Latest commit

bpostlethwaite Merge pull request #9 from rreusser/glsl-success
Get glslify working with ify-loader
Latest commit 3f24498 Sep 18, 2017


Type Name Latest commit message Commit time
Failed to load latest commit information.
fixtures Remove unused items from the glsl test Sep 15, 2017
.gitignore . Jan 2, 2016
.npmignore . Jan 2, 2016 . Jan 2, 2016 Update example in Mar 18, 2017
index.js Test with glslify Sep 14, 2017
package.json Test with glslify Sep 14, 2017
test.js Remove extra console.errors from test Sep 15, 2017



Webpack loader to handle browserify transforms as intended.


Install the loader using npm:

npm install --save ify-loader

You can then update your webpack.config.js in a similar fashion to the following to add browserify transform support to your project's dependencies:

module.exports = {
  module: {
    loaders: [
      // This applies the loader to all of your dependencies,
      // and not any of the source files in your project:
        test: /node_modules/,
        loader: 'ify-loader'

Using transforms in your project

Note that you're also free to apply this loader to files in your own project. Include the following in your project's webpack.config.js:

module.exports = {
  module: {
    loaders: [
      // support local package.json browserify config
        test: /\.js$/,
        loader: 'ify-loader',
        enforce: 'post'

Any browserify transforms you include in package.json will get picked up and applied this way:

  "name": "my-project",
  "dependencies": {
    "glslify": "5.0.0",
    "brfs": "1.4.2"
  "browserify": {
    "transform": [


When given the choice, I lean more in favour of browserify for its simplicity and compatability with node.js — however from time to time I need to work on projects that use webpack. The thing I run into issues with most often when switching between the two is the difference in how webpack handles source transforms compared to browserify.

Webpack provides you with a "global" configuration where you specify how your project and its dependencies are transformed in a single place. Browserify, however, scopes transforms to the current package to avoid conflicts between different dependencies' sources using the browserify.transform property in package.json.

There are pros and cons to both approaches — Webpack gives you more control, at the expense of having to configure each transform used in your dependency tree. Unlike transform-loader, ify-loader will automatically determine which browserify transforms to apply to your dependencies for you the same way that browserify itself does, making the process a lot more bearable in complex projects!

See Also


MIT, see for details.

You can’t perform that action at this time.