Webpack loader to handle browserify transforms as intended
npm install ify-loader
Webpack loader to handle browserify transforms as intended.
Install the loader using npm:
`` 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'
}
]
}
}
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"
]
}
}
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!
* browserify
* webpack
* transform-loader
MIT, see LICENSE.md for details.