webpackify

Use webpack through a Browserify plugin

webpackify

Use webpack through a Browserify plugin

Using this plugin, you can make Browserify:

  • Use AMD modules and they actually load asynchronously
  • Load any kind of resource CSS, images, fonts, Stylus, LESS, Handlebars, etc as a module
  • Split your bundles into chunks that load asynchronously
  • Resolve modules from custom folders, ie: ['node_modules', 'bower_components', 'src/vendor', 'etc']
  • Dynamically require('./langs/' + language + '.js') modules

...and almost everything else webpack does as webpack is just another node module that compiles modules, so why not?

require(['./big.js'], function(big) {
  // ./big.js will be split into it's own chunk and loaded async 
})

Install the css and style loaders with: npm install css-loader style-loader --save-dev

Within your code:

// Apply ./css/style.css directly to the page 
require('style!css!./css/style.css')
 
// Return the CSS as a string 
var css = require('css!./css/style.css')

Both @import() and url() statements within your CSS will resolve as modules too.

Configure the module folders through the webpackify key in your package.json:

{
  "name": "mypackage",
  "webpackify": {
    "resolve": {
      "modulesDirectories": ["node_modules", "bower_components", "src/vendor"]
    }
  }
}

and now calls to require('a-module') will first search node_modules/a-module, then bower_components/a-module and finally src/vendor/a-module before giving up.

Install the url-loader with: npm install url-loader --save-dev

Configure the loader to run on certain files in your package.json:

{
  "name": "mypackage",
  "webpackify": {
    "module": {
      "loaders": [
        { "test": "\.(png|svg|woff|eot|ttf|otf)$", "loader": "url?limit=100000" }
      ]
    }
  }
}

Now any file you load that ends with one of the above file extensions will be inlined if under 100k and loaded async if above 100k.

  • npm install browserify webpackify --save-dev
  • ./node_modules/.bin/browserify entry.js -o out/bundle.js -p [ webpackify ]
./node_modules/.bin/browserify entry.js -o out/bundle.js -p [ webpackify --cache --context ./anotherbase ]
{
  "name": "mypackage",
  "description": "This is my package",
  "version": "0.1.0",
  "devDependencies": {
    "browserify": "^3.38.0",
    "webpackify": "^0.1.0"
  },
  "webpackify": {
    "entry": "./index.js",
    "output": {
      "path": "./out/",
      "filename": "[hash].js",
      "publicPath": "../tmp/"
    }
  }
}

package.json:

{
  "name": "mypackage",
  "description": "This is my package",
  "version": "0.1.0",
  "devDependencies": {
    "browserify": "^3.38.0",
    "webpackify": "^0.1.0",
    "webpack": "^1.1.3"
  },
  "webpackify": "webpack.config.js"
}

webpack.config.js:

var DefinePlugin = require('webpack').DefinePlugin
var IgnorePlugin = require('webpack').IgnorePlugin
module.exports = {
  module: {
    loaders: [
      { test: /\.css$/, loader: 'style!css' },
      { test: /\.(png|svg|woff|eot|ttf|otf)$/, loader: 'url?limit=100000' }
    ],
  },
  plugins: [{
    new DefinePlugin({
      A_GLOBAL_VARIABLE: true
    }),
    new IgnorePlugin(/\.(html|txt|DS_Store)$/),
  ],
}

With npm do:

npm install webpackify
  • 0.1.1 - readme and test updates
  • 0.1.0 - initial release

Copyright (c) 2014 Kyle Robinson Young
Licensed under the MIT license.