├── .gitignore ├── LICENSE-MIT ├── README.md ├── index.js ├── package.json └── test ├── css ├── bear.css └── style.css ├── entry.js ├── index.html ├── lib └── bear.js └── web_modules └── animal └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | tmp 3 | -------------------------------------------------------------------------------- /LICENSE-MIT: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 Kyle Robinson Young 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # webpackify 2 | 3 | > Use [webpack](http://webpack.github.io/docs/) through a [Browserify](http://browserify.org) plugin 4 | 5 | ## Features 6 | 7 | Using this plugin, you can make Browserify: 8 | 9 | * Use AMD modules and they actually load asynchronously 10 | * Load any kind of resource CSS, images, fonts, Stylus, LESS, Handlebars, etc as a module 11 | * Split your bundles into chunks that load asynchronously 12 | * Resolve modules from custom folders, ie: `['node_modules', 'bower_components', 'src/vendor', 'etc']` 13 | * Dynamically `require('./langs/' + language + '.js')` modules 14 | 15 | ...and almost everything else webpack does as webpack is just another node module that compiles modules, so why not? 16 | 17 | ## Examples 18 | 19 | ### Load modules asynchronously 20 | 21 | ``` js 22 | require(['./big.js'], function(big) { 23 | // ./big.js will be split into it's own chunk and loaded async 24 | }) 25 | ``` 26 | 27 | ### Load CSS as modules 28 | 29 | Install the css and style loaders with: `npm install css-loader style-loader --save-dev` 30 | 31 | Within your code: 32 | 33 | ``` js 34 | // Apply ./css/style.css directly to the page 35 | require('style!css!./css/style.css') 36 | 37 | // Return the CSS as a string 38 | var css = require('css!./css/style.css') 39 | ``` 40 | 41 | Both `@import()` and `url()` statements within your CSS will resolve as modules too. 42 | 43 | ### Resolve modules from custom folders 44 | 45 | Configure the module folders through the `webpackify` key in your `package.json`: 46 | 47 | ``` json 48 | { 49 | "name": "mypackage", 50 | "webpackify": { 51 | "resolve": { 52 | "modulesDirectories": ["node_modules", "bower_components", "src/vendor"] 53 | } 54 | } 55 | } 56 | ``` 57 | 58 | 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. 59 | 60 | ### Load miscellaneous resources as modules 61 | 62 | Install the [url-loader](https://github.com/webpack/url-loader) with: `npm install url-loader --save-dev` 63 | 64 | Configure the loader to run on certain files in your `package.json`: 65 | 66 | ``` json 67 | { 68 | "name": "mypackage", 69 | "webpackify": { 70 | "module": { 71 | "loaders": [ 72 | { "test": "\.(png|svg|woff|eot|ttf|otf)$", "loader": "url?limit=100000" } 73 | ] 74 | } 75 | } 76 | } 77 | ``` 78 | 79 | 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. 80 | 81 | ## Usage 82 | 83 | * `npm install browserify webpackify --save-dev` 84 | * `./node_modules/.bin/browserify entry.js -o out/bundle.js -p [ webpackify ]` 85 | 86 | ### Configure through the CLI 87 | 88 | ``` shell 89 | ./node_modules/.bin/browserify entry.js -o out/bundle.js -p [ webpackify --cache --context ./anotherbase ] 90 | ``` 91 | 92 | ### Configure through `package.json` 93 | 94 | ``` json 95 | { 96 | "name": "mypackage", 97 | "description": "This is my package", 98 | "version": "0.1.0", 99 | "devDependencies": { 100 | "browserify": "^3.38.0", 101 | "webpackify": "^0.1.0" 102 | }, 103 | "webpackify": { 104 | "entry": "./index.js", 105 | "output": { 106 | "path": "./out/", 107 | "filename": "[hash].js", 108 | "publicPath": "../tmp/" 109 | } 110 | } 111 | } 112 | ``` 113 | 114 | ### Configure through `webpack.config.js` 115 | 116 | **package.json:** 117 | 118 | ``` json 119 | { 120 | "name": "mypackage", 121 | "description": "This is my package", 122 | "version": "0.1.0", 123 | "devDependencies": { 124 | "browserify": "^3.38.0", 125 | "webpackify": "^0.1.0", 126 | "webpack": "^1.1.3" 127 | }, 128 | "webpackify": "webpack.config.js" 129 | } 130 | ``` 131 | 132 | **webpack.config.js:** 133 | 134 | ``` js 135 | var DefinePlugin = require('webpack').DefinePlugin 136 | var IgnorePlugin = require('webpack').IgnorePlugin 137 | module.exports = { 138 | module: { 139 | loaders: [ 140 | { test: /\.css$/, loader: 'style!css' }, 141 | { test: /\.(png|svg|woff|eot|ttf|otf)$/, loader: 'url?limit=100000' } 142 | ], 143 | }, 144 | plugins: [{ 145 | new DefinePlugin({ 146 | A_GLOBAL_VARIABLE: true 147 | }), 148 | new IgnorePlugin(/\.(html|txt|DS_Store)$/), 149 | ], 150 | } 151 | ``` 152 | 153 | ## Install 154 | 155 | With [npm](http://npmjs.org) do: 156 | 157 | ``` 158 | npm install webpackify 159 | ``` 160 | 161 | ## release history 162 | 163 | * 0.1.1 - readme and test updates 164 | * 0.1.0 - initial release 165 | 166 | ## license 167 | Copyright (c) 2014 Kyle Robinson Young 168 | Licensed under the MIT license. 169 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack') 2 | var through = require('through') 3 | var extend = require('deep-extend') 4 | var path = require('path') 5 | var fs = require('fs') 6 | var EOL = require('os').EOL 7 | var charm = require('charm')() 8 | charm.pipe(process.stdout) 9 | 10 | module.exports = function(browserify, opts) { 11 | var entry = opts.entry || opts.e || browserify.argv.entry || browserify.argv.e || browserify.argv._.slice(0, 1) 12 | 13 | if (Array.isArray(entry) && entry.length === 1) entry = entry[0] 14 | var outfile = opts.outfile || opts.o || browserify.argv.outfile || browserify.argv.o 15 | 16 | var extensions = browserify._extensions || ['.js', '.json'] 17 | extensions.unshift('') 18 | 19 | opts = extend({ 20 | entry: (Array.isArray(entry)) ? entry.map(path.resolve) : path.resolve(entry), 21 | output: { 22 | path: path.resolve(path.dirname(outfile)), 23 | filename: path.basename(outfile), 24 | }, 25 | resolve: { 26 | extensions: extensions, 27 | }, 28 | }, readPkg(path.join(process.cwd(), 'package.json')), opts || {}) 29 | 30 | function parsewebpack(err, stats) { 31 | var self = this 32 | if (err) return self.emit('error', err) 33 | var stat = stats.toJson() 34 | if (stat.errors.length > 0) { 35 | stat.errors.forEach(function(err) { 36 | charm.foreground('red').write(err + EOL + EOL) 37 | }) 38 | } 39 | if (stat.warnings.length > 0) { 40 | stat.warnings.forEach(function(warn) { 41 | charm.foreground('yellow').write(warn + EOL + EOL) 42 | }) 43 | } 44 | fs.readFile(path.resolve(opts.output.path, stat.assetsByChunkName.main), function(err, data) { 45 | self.queue(data) 46 | self.queue(null) 47 | }) 48 | } 49 | 50 | browserify.noParse(opts.entry) 51 | browserify.transform({ global: false }, function(file) { 52 | if (file !== opts.entry) return through() 53 | return through(function(buf) { }, function() { 54 | webpack(opts, parsewebpack.bind(this)) 55 | }) 56 | }) 57 | } 58 | 59 | function readPkg(filepath) { 60 | var pkg = require(filepath) 61 | if (!pkg.webpackify) return {} 62 | if (typeof pkg.webpackify === 'string') return require(pkg.webpackify) 63 | return pkg.webpackify 64 | } 65 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpackify", 3 | "description": "Use webpack through a Browserify plugin", 4 | "version": "0.1.1", 5 | "homepage": "https://github.com/shama/webpackify", 6 | "author": { 7 | "name": "Kyle Robinson Young", 8 | "email": "kyle@dontkry.com", 9 | "url": "http://dontkry.com" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git://github.com/shama/webpackify.git" 14 | }, 15 | "bugs": { 16 | "url": "https://github.com/shama/webpackify/issues" 17 | }, 18 | "licenses": [ 19 | { 20 | "type": "MIT", 21 | "url": "https://github.com/shama/webpackify/blob/master/LICENSE-MIT" 22 | } 23 | ], 24 | "engines": { 25 | "node": ">= 0.10.0" 26 | }, 27 | "scripts": { 28 | "test": "rm -rf tmp && mkdir tmp && browserify test/entry.js -o tmp/bundle.js -p [ ./ ] && open test/index.html" 29 | }, 30 | "devDependencies": { 31 | "browserify": "^3.38.0", 32 | "css-loader": "^0.6.12", 33 | "style-loader": "^0.6.3" 34 | }, 35 | "dependencies": { 36 | "webpack": "^1.1.3", 37 | "through": "^2.3.4", 38 | "xtend": "^2.2.0", 39 | "deep-extend": "^0.2.8", 40 | "charm": "^0.2.0" 41 | }, 42 | "keywords": [ 43 | "browserify", 44 | "webpack", 45 | "browserify-plugin" 46 | ], 47 | "files": [ 48 | "LICENSE-MIT", 49 | "index.js" 50 | ], 51 | "webpackify": { 52 | "output": { 53 | "publicPath": "../tmp/" 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /test/css/bear.css: -------------------------------------------------------------------------------- 1 | .bear { 2 | background-color: red; 3 | width: 100px; 4 | height: 100px; 5 | } 6 | -------------------------------------------------------------------------------- /test/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #ddd; 3 | } -------------------------------------------------------------------------------- /test/entry.js: -------------------------------------------------------------------------------- 1 | var Bear = require('./lib/bear.js') 2 | 3 | // Apply CSS to the page 4 | require('style!css!./css/style.css') 5 | 6 | // Check to make sure bear loads css async 7 | var bear = new Bear() 8 | bear.on('data', function(css) { 9 | alert('Got the css: ' + css) 10 | }) 11 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | webpackify 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /test/lib/bear.js: -------------------------------------------------------------------------------- 1 | var inherits = require('util').inherits 2 | var Animal = require('animal') 3 | 4 | function Bear() { 5 | var self = this 6 | Animal.call(this) 7 | 8 | // Call things async and return raw CSS 9 | require(['css!../css/bear.css'], function(css) { 10 | process.nextTick(function() { 11 | self.emit('data', css) 12 | }) 13 | }) 14 | } 15 | module.exports = Bear 16 | inherits(Bear, Animal) 17 | -------------------------------------------------------------------------------- /test/web_modules/animal/index.js: -------------------------------------------------------------------------------- 1 | var EE = require('events').EventEmitter 2 | var inherits = require('util').inherits 3 | 4 | function Animal() { 5 | EE.call(this) 6 | } 7 | module.exports = Animal 8 | inherits(Animal, EE) 9 | --------------------------------------------------------------------------------