Skip to content

Commit 97ed773

Browse files
sokrasokra
committed
better loader support
1 parent 41f36de commit 97ed773

16 files changed

Lines changed: 353 additions & 212 deletions

‎.npmignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/node_modules
2+
/test/js
3+
/test/browsertest/js
4+
/examples
5+
README.md

‎README.md‎

Lines changed: 71 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
As developer you want to reuse existing code.
44
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.
5+
56
The goal of `webpack` is to bundle CommonJs modules into javascript files which can be loaded by `<script>`-tags.
67
Simply concating all required files has a disadvantage: many code to download (and execute) on page load.
78
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.
@@ -12,16 +13,16 @@ The result is a smaller inital code download which results in faster page load.
1213

1314
* bundle CommonJs modules for browser
1415
* reuse server-side code (node.js) on client-side
15-
* create multiple files which are loaded on demand (faster page load in big webapps)
16-
* dependencies managed for you, on compile time
16+
* create multiple files which are loaded on demand (faster page load in big webapps or on mobile connections)
17+
* dependencies managed for you, on compile time (no resolution on runtime needed)
1718

1819
## Goals
1920

20-
* minimize code size
21+
* make node.js and browser development similar
22+
* minimize code size (mobile connection)
2123
* minimize code size on inital download
2224
* download code only on demand
23-
* hide development details, like module names and folder structure
24-
* require minimal configuration
25+
* require minimal configuration, but offer a maximum
2526
* load polyfills for node-specific things if used
2627
* offer replacements for node buildin libaries
2728

@@ -83,6 +84,10 @@ File 2: 1.web.js
8384
- code of module d and dependencies
8485
```
8586

87+
Initially only `web.js` is included (and loaded) by your application.
88+
`1.web.js` is loaded when the call to `require.ensure` happens.
89+
After the second bundle (`1.web.js`) is loaded, the callback function will be invoked.
90+
8691
See [details](modules-webpack/tree/master/examples/code-splitting) for exact output.
8792

8893
## Reusing node.js code
@@ -143,7 +148,7 @@ function getTemplate(templateName) {
143148
// which compiles to: return require(123)("./"+templateName)
144149
```
145150

146-
See [details](modules-webpack/tree/master/examples/require.context) for complete example.
151+
See [details](/sokra/modules-webpack/tree/master/examples/require.context) for complete example.
147152

148153
When try to store the `require` function in another variable or try to pass it as parameter,
149154
`webpack` convert it to a `require.context(".")` to be compatible.
@@ -168,7 +173,7 @@ The `raw` loader plugin is looked up at modules `raw-webpack-web-loader`, `raw-w
168173
and the following files are looked up: `index.webpack-web-loader.js`, `index.webpack-loader.js`, `index.web-loader.js`, `index.loader.js`, `index`, `index.js`.
169174
Note that the `web-` versions are omitted if loaders are used in node.js.
170175

171-
See [example](modules-webpack/tree/master/examples/loader).
176+
See [example](/sokra/modules-webpack/tree/master/examples/loader).
172177

173178
The following loaders are included as optional dependencies:
174179

@@ -218,29 +223,30 @@ try `--min` to minimize with `uglify-js`.
218223

219224
### `require`-function
220225

221-
* `require` should not be overwritten
226+
* `require` should not be overwritten, except from polyfill
222227
* `require.ensure` should not be overwritten or called indirect
223228
* `require.context` should not be overwritten or called indirect
224229
* the argument to `require.context` should be a literal or addition of multiple literals
225230
* An indirect call of `require` should access a file in current directory: This throws an exception: `var r = require; r("../file");`
226231

227232
The following cases could result in **too much code** in result file if used wrong:
228233

229-
* indirect call of `require`: `var r = require; r("./file");`
234+
* indirect call of `require`: `var r = require; r("./file");`. It includes the whole directory.
230235
* `require.context`. It includes the whole directory.
231-
* expressions in require arguments: `require(variable)` (but `webpack` is smart enough for this `require(condition ? "a" : "b")`)
232-
* the function passed to `require.ensure` is not inlined in the call.
236+
* expressions in require arguments: `require(variable)`. It includes the whole directory. (except from `?:`-operator `require(condition ? "a" : "b")`)
237+
* the function passed to `require.ensure` is not inlined in the call. Only requires in inlined function move into the second bundle.
233238

234239

235240
### node.js specific modules
236241

237-
As node.js specific modules like `fs` will not work in browser they are not included and cause an error.
242+
As node.js specific modules like `fs` will not work in browser they are not included (by default) and cause an exception.
238243
You should replace them by own modules if you want to use them.
239-
For some modules are replacements included in `webpack`.
240-
Some credit goes to the browserify contributors, as I took some replacements from them.
244+
For some simple modules are replacements included in `webpack`.
241245
Expensive replacements are not needed by everyone, so that are not included by default.
242246
You need to specify `--alias [module]=[replacement]` to use them.
243-
A warning saying that some module is missing is emitted in the case you use it.
247+
A warning saying that some module is missing is emitted in the case you use it without providing a replacement.
248+
249+
Some credit goes to the browserify contributors, you can use replacements provided by them.
244250

245251
Included simple replacements:
246252

@@ -289,32 +295,76 @@ webpack(absoluteModulePath, [options], callback)
289295

290296
#### `options`
291297

292-
you can save this options object in a JSON file and use it with the shell command.
298+
You can also save this options object in a JSON file and use it with the shell command.
293299

294300
`outputJsonpFunction`
301+
295302
JSONP function used to load chunks
296303

297304
`scriptSrcPrefix`
305+
298306
Path from where chunks are loaded
299307

300308
`outputDirectory`
309+
301310
write files to this directory (absolute path)
302311

303312
`output`
313+
304314
write first chunk to this file
305315

306316
`outputPostfix`
317+
307318
write chunks to files named chunkId plus outputPostfix
308319

309320
`libary`
321+
310322
exports of input file are stored in this variable
311323

312324
`minimize`
325+
313326
minimize outputs with uglify-js
314327

315328
`includeFilenames`
329+
316330
add absolute filenames of input files as comments
317331

332+
`resolve.alias` (object)
333+
334+
replace a module. ex. `{"old-module": "new-module"}`
335+
336+
`resolve.paths` (array)
337+
338+
search paths
339+
340+
`resolve.extensions` (object)
341+
342+
possible extensions for files
343+
344+
default: `["", ".webpack.js", ".web.js", ".js"]`
345+
346+
`resolve.loaders` (array)
347+
348+
extension to loader mappings. ex. `[{test: /\.extension$/, loader: "myloader"}]`
349+
350+
loads files that matches the RegExp to the loader if no other loader set
351+
352+
`resolve.loaderExtensions` (array)
353+
354+
possible extensions for loaders
355+
356+
default: `[".webpack-web-loader.js", ".webpack-loader.js", ".web-loader.js", ".loader.js", "", ".js"]`
357+
358+
`resolve.loaderPostfixes` (array)
359+
360+
possible postfixes for loaders
361+
362+
default: `["-webpack-web-loader", "-webpack-loader", "-web-loader", "-loader", ""]`
363+
364+
`parse.overwrites` (object)
365+
366+
free module variables which are replaced with a module. ex. `{ "$": "jquery" }`
367+
318368
#### `callback`
319369

320370
`function(err, source / stats)`
@@ -439,13 +489,13 @@ else `stats` as json see [example](modules-webpack/tree/master/examples/code-spl
439489
<code>require("http");</code>
440490
</td>
441491
<td>
442-
some
492+
some optional
443493
</td>
444494
<td>
445495
no
446496
</td>
447497
<td>
448-
many
498+
many by default
449499
</td>
450500
</tr>
451501

@@ -559,7 +609,7 @@ else `stats` as json see [example](modules-webpack/tree/master/examples/code-spl
559609
require JSON
560610
</td>
561611
<td>
562-
yes **NEW**
612+
yes <em>NEW</em>
563613
</td>
564614
<td>
565615
no
@@ -589,7 +639,7 @@ else `stats` as json see [example](modules-webpack/tree/master/examples/code-spl
589639
loaders
590640
</td>
591641
<td>
592-
yes **NEW**
642+
yes <em>NEW</em>
593643
</td>
594644
<td>
595645
no
@@ -604,7 +654,7 @@ else `stats` as json see [example](modules-webpack/tree/master/examples/code-spl
604654
compile coffee script
605655
</td>
606656
<td>
607-
yes **NEW**
657+
yes <em>NEW</em>
608658
</td>
609659
<td>
610660
no

‎bin/webpack.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,14 @@ var argv = require("optimist")
3939
.boolean("json")
4040
.describe("json", "Output Stats as JSON")
4141
.default("json", false)
42-
42+
4343
.string("alias")
4444
.describe("alias", "Set a alias name for a module. ex. http=http-browserify")
4545

46+
.boolean("debug")
47+
.describe("debug", "Prints debug info to output files")
48+
.default("debug", false)
49+
4650
.demand(1)
4751
.argv;
4852

@@ -70,6 +74,10 @@ if(argv.min) {
7074
options.minimize = true;
7175
}
7276

77+
if(argv.debug) {
78+
options.debug = true;
79+
}
80+
7381
if(argv.filenames) {
7482
options.includeFilenames = true;
7583
}
@@ -161,6 +169,11 @@ if(argv.single) {
161169
console.log("\033[1m\033[33mWARNING: " + warning + "\033[39m\033[22m");
162170
});
163171
}
172+
if(stats.errors) {
173+
stats.errors.forEach(function(error) {
174+
console.log("\033[1m\033[31mERROR: " + error + "\033[39m\033[22m");
175+
});
176+
}
164177
}
165178
});
166179
}

0 commit comments

Comments
 (0)