use example from website

This commit is contained in:
Tobias Koppers 2014-02-20 08:52:12 +01:00
parent 5530e3784d
commit 271fa8fb75
1 changed files with 36 additions and 23 deletions

View File

@ -56,39 +56,52 @@ webpack can do many optimizations to **reduce the output size**. It also cares a
# A small example what's possible
``` javascript
// webpack is a module bundler
// This means webpack takes modules with dependencies
// and emit static assets representing that modules.
// dependencies can be written in CommonJs
var commonjs = require("./commonjs");
define(["amd-module", "./file"], function(amdModule, file) {
// or in AMD
define(["amd-module", "../file"], function(amdModule, file) {
// while previous constructs are sync
// this is async
require(["big-module/big/file"], function(big) {
// AMD require acts as split point
// and "big-module/big/file" is only downloaded when requested
// for async dependencies webpack splits
// your application into multiple "chunks".
// This part of your application is
// loaded on demand (Code Splitting)
var stuff = require("../my/stuff");
// dependencies automatically goes in chunk too
// "../my/stuff" is also loaded on demand
// because it's in the callback function
// of the AMD require
});
});
require("coffee!./cup.coffee");
// The loader syntax allows to proprocess files
// for common stuff you can bind RegExps to loaders
// if you also add ".coffee" to the default extensions
// you can write:
// "Loaders" can be used to preprocess files.
// They can be prefixed in the require call
// or configured in the configuration.
require("./cup");
// This does the same when you add ".coffee" to the extensions
// and configure the "coffee" loader for /\.coffee$/
function loadTemplate(name) {
return require("./templates/" + name ".jade");
// dynamic requires are supported
// while compiling we figure out what can be requested
// here everything in "./templates" that matches /^.*\.jade$/
// (can also be in subdirectories)
return require("./templates/" + name + ".jade");
// many expression are supported in require calls
// a clever parser extract information and concludes
// that everything in "./templates" that matches
// /\.jade$/ should be included in the bundle, as it
// can be required.
}
require("imports?_=underscore!../loaders/my-ejs-loader!./template.html");
// you can chain loaders
// you can configure loaders with query parameters
// and loaders resolve similar to modules
// ...you can combine everything
// ... and you can combine everything
function loadTemplateAsync(name, callback) {
require(["bundle?lazy!./templates/" + name + ".jade"], function(templateBundle) {
require(["bundle?lazy!./templates/" + name + ".jade"],
function(templateBundle) {
templateBundle(callback);
});
}