Skip to content

Commit e3b9430

Browse files
sokrasokra
committed
module ids are predictable, loaders not optional anymore
1 parent 2b74fd7 commit e3b9430

File tree

13 files changed

+394
-273
lines changed

13 files changed

+394
-273
lines changed

‎README.md‎

Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,27 @@
11
# modules-webpack
22

33
As developer you want to reuse existing code.
4-
As with node.js and web all file are already in the same language, but it is extra work to use your code with the node.js module system and the browser.
4+
As with node.js and web all files are already in the same language, but it is extra work to use your code with the node.js module system and the browser.
55

66
The goal of `webpack` is to bundle CommonJs modules into javascript files which can be loaded by `<script>`-tags.
77
Simply concating all required files has a disadvantage: many code to download (and execute) on page load.
88
Therefore `webpack` uses the `require.ensure` function ([CommonJs/Modules/Async/A](http://wiki.commonjs.org/wiki/Modules/Async/A)) to split your code automatically into multiple bundles which are loaded on demand.
9-
This happens mostly transparent to the developer with a single function call. Dependencies are resolved for you.
9+
This happens mostly transparent to the developer.
10+
Dependencies are resolved for you.
1011
The result is a smaller inital code download which results in faster page load.
1112

13+
Another common thing in web development is that some files have to be preprocessed before send to the client (ex. template files).
14+
This introduce more complexity to the compile step.
15+
`webpack` supports loaders which process files before including them.
16+
You as developer can use such files like any other module.
17+
1218
**TL;DR**
1319

1420
* bundle CommonJs modules for browser
1521
* reuse server-side code (node.js) on client-side
1622
* create multiple files which are loaded on demand (faster page load in big webapps or on mobile connections)
1723
* dependencies managed for you, on compile time (no resolution on runtime needed)
24+
* loaders can preprocess files
1825

1926
## Goals
2027

@@ -39,7 +46,7 @@ exports.stuff = function(text) {
3946
}
4047
```
4148

42-
are compiled to
49+
are compiled to (reformatted)
4350

4451
``` javascript
4552
(/* small webpack header */)
@@ -53,7 +60,7 @@ are compiled to
5360
1: function(module, exports, require) {
5461

5562
exports.stuff = function(text) {
56-
console.log(text);
63+
console.log(text)
5764
}
5865

5966
}
@@ -118,7 +125,7 @@ in options: `alias: { "http": "http-browserify" }`
118125

119126
in shell: `--alias http=http-browserify`
120127

121-
## require.context
128+
## Contexts
122129

123130
If the required module is not known while compile time we get into a problem.
124131
A solution is the method `require.context` which takes a directory as parameter
@@ -177,15 +184,16 @@ Note that the `web-` versions are omitted if loaders are used in node.js.
177184

178185
See [example](/sokra/modules-webpack/tree/master/examples/loader).
179186

180-
The following loaders are included as optional dependencies:
187+
The following loaders are included in webpack:
181188

182-
* `raw`: Loads raw content of a file
189+
* `raw`: Loads raw content of a file (as utf-8)
183190
* `json` (default at `.json`): Loads file as JSON
184191
* `jade` (default at `.jade`): Loads jade template and returns a function
185192
* `coffee` (default at `.coffee`): Loads coffee-script like javascript
186-
* `css`: Loads css file with resolved imports
193+
* `css`: Loads css file with resolved imports and returns css code
187194
* `style`: Adds result of javascript execution to DOM
188-
* `.css` defaults to `style!css` loader, so all css rules are added to DOM
195+
* (`.css` defaults to `style!css` loader, so all css rules are added to DOM)
196+
* `script`: Executes a javascript file once in global context (like in script tag), requires are not parsed. Use this to include a libary. ex. `require("script!./jquery.min.js")`. This is synchron, so the `$` variable is avalible after require.
189197

190198
TODO
191199

@@ -260,7 +268,7 @@ Included simple replacements:
260268
* `child_process`: disabled
261269
* `events`: copy of node.js' version
262270
* `path`: copy of node.js' version
263-
* `punycode`: copy of node.js' version, one line removed
271+
* `punycode`: copy of node.js' version, one line removed (http://mths.be/punycode by @mathias)
264272
* `querystring`: copy of node.js' version
265273
* `string_decoder`: copy of node.js' version
266274
* `url`: copy of node.js' version
@@ -294,7 +302,10 @@ Options:
294302
--libary Stores the exports into this variable [string]
295303
--colors Output Stats with colors [boolean] [default: false]
296304
--json Output Stats as JSON [boolean] [default: false]
305+
--by-size Sort modules by size in Stats [boolean] [default: false]
306+
--verbose Output dependencies in Stats [boolean] [default: false]
297307
--alias Set a alias name for a module. ex. http=http-browserify [string]
308+
--debug Prints debug info to output files [boolean] [default: false]
298309
```
299310

300311
### Programmatically Usage
@@ -336,6 +347,10 @@ exports of input file are stored in this variable
336347

337348
minimize outputs with uglify-js
338349

350+
`debug`
351+
352+
prints debug info to output files.
353+
339354
`includeFilenames`
340355

341356
add absolute filenames of input files as comments
@@ -500,13 +515,13 @@ else `stats` as json see [example](/sokra/modules-webpack/tree/master/examples/c
500515
<code>require("http");</code>
501516
</td>
502517
<td>
503-
some optional
518+
yes
504519
</td>
505520
<td>
506521
no
507522
</td>
508523
<td>
509-
many by default
524+
yes
510525
</td>
511526
</tr>
512527

@@ -695,7 +710,7 @@ else `stats` as json see [example](/sokra/modules-webpack/tree/master/examples/c
695710
debug mode
696711
</td>
697712
<td>
698-
no
713+
yes
699714
</td>
700715
<td>
701716
no
@@ -763,7 +778,7 @@ cd test/browsertests
763778
node build
764779
```
765780

766-
and open `test.html` in browser. There must be several OKs in the file and no FAIL.
781+
and open `test.html` in browser. There must be several OKs in the file, no FAIL and no RED boxes.
767782

768783
## Contribution
769784

@@ -773,9 +788,10 @@ You are also welcome to correct any spelling mistakes or any language issues, be
773788

774789
## Future plans
775790

791+
* watch mode
792+
* append hash of file to filename, for better caching
776793
* more polyfills for node.js buildin modules, but optional
777794
* require from protocol `require("http://...")`
778-
* watch mode
779795

780796
## License
781797

‎bin/webpack.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,10 @@ var argv = require("optimist")
4040
.describe("json", "Output Stats as JSON")
4141
.default("json", false)
4242

43+
.boolean("by-size")
44+
.describe("by-size", "Sort modules by size in Stats")
45+
.default("by-size", false)
46+
4347
.boolean("verbose")
4448
.describe("verbose", "Output dependencies in Stats")
4549
.default("verbose", false)
@@ -162,11 +166,19 @@ if(argv.single) {
162166
return filename.replace(/^!/, "");
163167
}
164168
if(stats.fileModules) {
169+
console.log();
170+
console.log(" <id> <size> <filename>");
171+
if(argv.verbose)
172+
console.log(" <reason> from <filename>");
165173
for(var file in stats.fileModules) {
166174
console.log(c("\033[1m\033[32m") + file + c("\033[39m\033[22m"));
167175
var modules = stats.fileModules[file];
176+
if(argv["by-size"])
177+
modules.sort(function(a, b) {
178+
return b.size - a.size;
179+
});
168180
modules.forEach(function(module) {
169-
console.log(" "+c("\033[1m") + sprintf("%3s", module.id+"") + " " +
181+
console.log(" "+c("\033[1m") + sprintf("%3s", module.id+"") + " " + (typeof module.size === "number" ? sprintf("%9s", Math.round(module.size)+"") : " ") + " " +
170182
(compressFilename(module.filename) ||
171183
(module.dirname && ("[context] " + compressFilename(module.dirname))) ||
172184
"[unknown]") + c("\033[22m"));

‎examples/build-common.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ cp.exec("node ../../bin/webpack.js --verbose --min "+extraArgs+" example.js js/o
2424
if (error !== null)
2525
console.log(error);
2626
readme = tc(readme, require.context("raw!"+process.cwd()), stdout.replace(/[\r\n]*$/, ""));
27+
readme = readme.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
2728
require("fs").writeFile("README.md", readme, "utf-8", function() {});
2829
});
2930
});

‎examples/code-splitted-require.context/README.md‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ getTemplate("b", function(b) {
6161
/******/ /* WEBPACK FREE VAR INJECTION */ (function(console) {
6262
function getTemplate(templateName, callback) {
6363
require.ensure(1, function(require) {
64-
callback(require(/* ../require.context/templates */1)("./"+templateName));
64+
callback(require(/* ../require.context/templates */2)("./"+templateName));
6565
});
6666
}
6767
getTemplate("a", function(a) {
@@ -70,11 +70,11 @@ getTemplate("a", function(a) {
7070
getTemplate("b", function(b) {
7171
console.log(b);
7272
});
73-
/******/ /* WEBPACK FREE VAR INJECTION */ }(require(/* __webpack_console */2)))
73+
/******/ /* WEBPACK FREE VAR INJECTION */ }(require(/* __webpack_console */1)))
7474

7575
/******/},
7676
/******/
77-
/******/2: function(module, exports, require) {
77+
/******/1: function(module, exports, require) {
7878

7979
var console = window.console;
8080
module.exports = console;
@@ -106,21 +106,24 @@ Modules: 6
106106
Modules including duplicates: 6
107107
Modules pre chunk: 3
108108
Modules first chunk: 2
109-
output.js: 2707 characters
110-
1.output.js: 780 characters
109+
output.js: 2659 characters
110+
1.output.js: 763 characters
111+
112+
<id> <size> <filename>
113+
<reason> from <filename>
111114
output.js
112-
0 .\example.js
115+
0 162 .\example.js
113116
main
114-
2 (webpack)\buildin\__webpack_console.js
117+
1 332 (webpack)\buildin\__webpack_console.js
115118
require (2x) from .\example.js
116119
1.output.js
117-
1 [context] ..\require.context\templates
120+
2 [context] ..\require.context\templates
118121
sync context from .\example.js
119-
3 ..\require.context\templates\a.js
122+
3 72 ..\require.context\templates\a.js
120123
sync context from .\example.js
121-
4 ..\require.context\templates\b.js
124+
4 72 ..\require.context\templates\b.js
122125
sync context from .\example.js
123-
5 ..\require.context\templates\c.js
126+
5 72 ..\require.context\templates\c.js
124127
sync context from .\example.js
125128
```
126129

@@ -133,19 +136,22 @@ Modules including duplicates: 6
133136
Modules pre chunk: 3
134137
Modules first chunk: 2
135138
output.js: 1062 characters
136-
1.output.js: 436 characters
139+
1.output.js: 430 characters
140+
141+
<id> <size> <filename>
142+
<reason> from <filename>
137143
output.js
138-
0 .\example.js
144+
0 162 .\example.js
139145
main
140-
2 (webpack)\buildin\__webpack_console.js
146+
1 332 (webpack)\buildin\__webpack_console.js
141147
require (2x) from .\example.js
142148
1.output.js
143-
1 [context] ..\require.context\templates
149+
2 [context] ..\require.context\templates
144150
sync context from .\example.js
145-
3 ..\require.context\templates\a.js
151+
3 72 ..\require.context\templates\a.js
146152
sync context from .\example.js
147-
4 ..\require.context\templates\b.js
153+
4 72 ..\require.context\templates\b.js
148154
sync context from .\example.js
149-
5 ..\require.context\templates\c.js
155+
5 72 ..\require.context\templates\c.js
150156
sync context from .\example.js
151157
```

‎examples/code-splitting/README.md‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,11 @@ require.ensure(["c"], function(require) {
5454
/******/({a:".output.js",b:"webpackJsonp",c:"",
5555
/******/0: function(module, exports, require) {
5656

57-
var a = require(/* a */4);
57+
var a = require(/* a */2);
5858
var b = require(/* b */1);
5959
require.ensure(1, function(require) {
6060
require(/* b */1).xyz();
61-
var d = require(/* d */3);
61+
var d = require(/* d */4);
6262
});
6363

6464
/******/},
@@ -69,7 +69,7 @@ require.ensure(1, function(require) {
6969

7070
/******/},
7171
/******/
72-
/******/4: function(module, exports, require) {
72+
/******/2: function(module, exports, require) {
7373

7474
// module a
7575

@@ -82,13 +82,13 @@ require.ensure(1, function(require) {
8282

8383
``` javascript
8484
/******/webpackJsonp(1, {
85-
/******/2: function(module, exports, require) {
85+
/******/3: function(module, exports, require) {
8686

8787
// module c
8888

8989
/******/},
9090
/******/
91-
/******/3: function(module, exports, require) {
91+
/******/4: function(module, exports, require) {
9292

9393
// module d
9494

@@ -113,19 +113,22 @@ Modules: 5
113113
Modules including duplicates: 5
114114
Modules pre chunk: 2.5
115115
Modules first chunk: 3
116-
output.js: 2114 characters
116+
output.js: 2071 characters
117117
1.output.js: 200 characters
118+
119+
<id> <size> <filename>
120+
<reason> from <filename>
118121
output.js
119-
0 .\example.js
122+
0 82 .\example.js
120123
main
121-
1 .\node_modules\b.js
124+
1 .\node_modules\b.js
122125
require (2x) from .\example.js
123-
4 .\node_modules\a.js
126+
2 .\node_modules\a.js
124127
require (1x) from .\example.js
125128
1.output.js
126-
2 .\node_modules\c.js
129+
3 .\node_modules\c.js
127130
async require (1x) from .\example.js
128-
3 .\node_modules\d.js
131+
4 .\node_modules\d.js
129132
async require (1x) from .\example.js
130133
```
131134

@@ -139,16 +142,19 @@ Modules pre chunk: 2.5
139142
Modules first chunk: 3
140143
output.js: 747 characters
141144
1.output.js: 57 characters
145+
146+
<id> <size> <filename>
147+
<reason> from <filename>
142148
output.js
143-
0 .\example.js
149+
0 82 .\example.js
144150
main
145-
1 .\node_modules\a.js
146-
require (1x) from .\example.js
147-
2 .\node_modules\b.js
151+
1 .\node_modules\b.js
148152
require (2x) from .\example.js
153+
2 .\node_modules\a.js
154+
require (1x) from .\example.js
149155
1.output.js
150-
3 .\node_modules\d.js
156+
3 .\node_modules\c.js
151157
async require (1x) from .\example.js
152-
4 .\node_modules\c.js
158+
4 .\node_modules\d.js
153159
async require (1x) from .\example.js
154160
```

0 commit comments

Comments
 (0)