Skip to content

Commit 271fa8f

Browse files
committed
use example from website
1 parent 5530e37 commit 271fa8f

File tree

1 file changed

+36
-23
lines changed

1 file changed

+36
-23
lines changed

README.md

Lines changed: 36 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -56,39 +56,52 @@ webpack can do many optimizations to **reduce the output size**. It also cares a
5656
# A small example what's possible
5757

5858
``` javascript
59+
// webpack is a module bundler
60+
// This means webpack takes modules with dependencies
61+
// and emit static assets representing that modules.
62+
63+
// dependencies can be written in CommonJs
5964
var commonjs = require("./commonjs");
60-
define(["amd-module", "./file"], function(amdModule, file) {
65+
// or in AMD
66+
define(["amd-module", "../file"], function(amdModule, file) {
67+
// while previous constructs are sync
68+
// this is async
6169
require(["big-module/big/file"], function(big) {
62-
// AMD require acts as split point
63-
// and "big-module/big/file" is only downloaded when requested
70+
// for async dependencies webpack splits
71+
// your application into multiple "chunks".
72+
// This part of your application is
73+
// loaded on demand (Code Splitting)
6474
var stuff = require("../my/stuff");
65-
// dependencies automatically goes in chunk too
75+
// "../my/stuff" is also loaded on demand
76+
// because it's in the callback function
77+
// of the AMD require
6678
});
6779
});
68-
80+
81+
6982
require("coffee!./cup.coffee");
70-
// The loader syntax allows to proprocess files
71-
// for common stuff you can bind RegExps to loaders
72-
// if you also add ".coffee" to the default extensions
73-
// you can write:
83+
// "Loaders" can be used to preprocess files.
84+
// They can be prefixed in the require call
85+
// or configured in the configuration.
7486
require("./cup");
75-
87+
// This does the same when you add ".coffee" to the extensions
88+
// and configure the "coffee" loader for /\.coffee$/
89+
90+
7691
function loadTemplate(name) {
77-
return require("./templates/" + name ".jade");
78-
// dynamic requires are supported
79-
// while compiling we figure out what can be requested
80-
// here everything in "./templates" that matches /^.*\.jade$/
81-
// (can also be in subdirectories)
92+
return require("./templates/" + name + ".jade");
93+
// many expression are supported in require calls
94+
// a clever parser extract information and concludes
95+
// that everything in "./templates" that matches
96+
// /\.jade$/ should be included in the bundle, as it
97+
// can be required.
8298
}
83-
84-
require("imports?_=underscore!../loaders/my-ejs-loader!./template.html");
85-
// you can chain loaders
86-
// you can configure loaders with query parameters
87-
// and loaders resolve similar to modules
88-
89-
// ...you can combine everything
99+
100+
101+
// ... and you can combine everything
90102
function loadTemplateAsync(name, callback) {
91-
require(["bundle?lazy!./templates/" + name + ".jade"], function(templateBundle) {
103+
require(["bundle?lazy!./templates/" + name + ".jade"],
104+
function(templateBundle) {
92105
templateBundle(callback);
93106
});
94107
}

0 commit comments

Comments
 (0)