# ify-loader [![experimental](http://badges.github.io/stability-badges/dist/experimental.svg)](http://github.com/badges/stability-badges) [Webpack](https://github.com/webpack/webpack) loader to handle [browserify transforms](https://github.com/substack/browserify-handbook#browserifytransform-field) as intended. ## Usage Install the loader using [npm](https://npmjs.com/): ``` glsl 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: ``` javascript 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`: ``` javascript 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: ``` json { "name": "my-project", "dependencies": { "glslify": "5.0.0", "brfs": "1.4.2" }, "browserify": { "transform": [ "glslify", "brfs" ] } } ``` ## Why? When given the choice, I lean more in favour of [browserify](http://browserify.org) 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](https://github.com/substack/node-browserify#browserifytransform) 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](https://github.com/webpack/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 * [browserify](https://github.com/substack/node-browserify) * [webpack](https://github.com/webpack/webpack) * [transform-loader](https://github.com/webpack/transform-loader) ## License MIT, see [LICENSE.md](http://github.com/hughsk/ify-loader/blob/master/LICENSE.md) for details.