mirror of https://github.com/webpack/webpack.git
use example from website
This commit is contained in:
parent
5530e3784d
commit
271fa8fb75
51
README.md
51
README.md
|
@ -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);
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue