@jellybellydev
|
|
|
var $ = require('lib/jQuery'),
_ = require('lib/lodash');
//...stuff
module.exports = ...;
define(
'fooModule',
['lib/jQuery', 'lib/lodash'],
function ($, _) {
//...stuff
return { ... }
}
});
require(['lib/jQuery', 'fooModule'],
function ($, foo) {
//...stuff
}
});
define(function (require, exports, module) {
var $ = require('lib/jQuery'),
_ = require('lib/lodash');
//...stuff
module.exports = ...;
});
import 'lib/jQuery' as $;
import 'lib/lodash' as _;
//...stuff
export var result = { ... }
is a module bundler and not a task runner
understands almost any module system: AMD, CommonJS, ES6 modules, etc
analyzes dependencies among your modules (not only JS but also CSS, HTML, etc) and generates assets
creates one or many bundles
gives you hooks to transform modules
npm install webpack --save-dev
or
npm install webpack -g
command line interface
webpack <entry.js> <result.js>
node.js api (great to integrate with grunt, gulp, broccoli, etc)
var webpack = require('webpack');
webpack( { /* configuration */ },
function(err, stats) { /* stuff */ });
file module (touch webpack.config.js)
module.exports = { /* configuration */ };
feature | webpack | requirejs | browserify | jspm | rollup |
---|---|---|---|---|---|
commonjs `require` | yes | only wrapping in define | yes | yes | plugin |
amd `define` | yes | yes | plugin | yes | no |
amd `require` | yes | yes | no | yes | no |
amd `require` loads on demand | yes | manual configuration | no | yes | no |
single bundle | yes | yes | yes | yes | yes |
multiple bundles | yes | manual configuration | manual configuration | yes | no |
common bundle | manual configuration | yes | manual configuration | no | no |
watch mode | yes | no | yes | no | no |