@@ -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
5964var 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+
6982require (" 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.
7486require (" ./cup" );
75-
87+ // This does the same when you add ".coffee" to the extensions
88+ // and configure the "coffee" loader for /\.coffee$/
89+
90+
7691function 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
90102function 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