webpack/examples/loader/README.md

164 lines
4.1 KiB
Markdown
Raw Normal View History

2012-03-27 06:00:51 +08:00
# example.js
``` javascript
// Polyfill require for node.js usage of loaders
require = require("../../require-polyfill")(require.valueOf());
// use our loader
console.dir(require("./loader!./file"));
// use buildin json loader
console.dir(require("./test.json")); // default by extension
console.dir(require("json!./test.json")); // manual
```
# file.js
``` javascript
exports.foo = "bar";
```
# loader.js
``` javascript
2012-04-05 21:08:49 +08:00
module.exports = function(content) {
return "exports.answer = 42;\n" + content;
2012-03-27 06:00:51 +08:00
}
```
# test.json
``` javascript
{
"foobar": 1234
}
```
# js/output.js
``` javascript
/******/(function(modules) {
/******/ var installedModules = {};
/******/ function require(moduleId) {
/******/ if(typeof moduleId !== "number") throw new Error("Cannot find module '"+moduleId+"'");
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ var module = installedModules[moduleId] = {
2012-08-23 08:05:07 +08:00
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
2012-03-27 06:00:51 +08:00
/******/ };
/******/ modules[moduleId](module, module.exports, require);
2012-08-23 08:05:07 +08:00
/******/ module.loaded = true;
2012-03-27 06:00:51 +08:00
/******/ return module.exports;
/******/ }
2012-05-22 04:59:31 +08:00
/******/ require.e = function(chunkId, callback) {
2012-03-27 06:00:51 +08:00
/******/ callback(require);
/******/ };
2012-05-17 18:47:06 +08:00
/******/ require.modules = modules;
2012-07-11 23:53:46 +08:00
/******/ require.cache = installedModules;
2012-03-27 06:00:51 +08:00
/******/ return require(0);
/******/})
2012-08-07 04:19:15 +08:00
/******/({c:"",
2012-03-27 06:00:51 +08:00
/******/0: function(module, exports, require) {
2012-07-11 23:53:46 +08:00
/*** .\example.js ***/
2012-04-05 20:59:01 +08:00
/******/ /* WEBPACK FREE VAR INJECTION */ (function(console) {
2012-03-27 06:00:51 +08:00
// Polyfill require for node.js usage of loaders
2012-10-09 06:12:10 +08:00
require = require("../../require-polyfill")(require.valueOf());
2012-03-27 06:00:51 +08:00
// use our loader
2012-04-05 20:59:01 +08:00
console.dir(require(/* ./loader!./file */3));
2012-03-27 06:00:51 +08:00
// use buildin json loader
console.dir(require(/* ./test.json */2)); // default by extension
console.dir(require(/* json!./test.json */2)); // manual
/******/ /* WEBPACK FREE VAR INJECTION */ }(require(/* __webpack_console */1)))
2012-03-27 06:00:51 +08:00
/******/},
/******/
/******/1: function(module, exports, require) {
2012-07-11 23:53:46 +08:00
/*** (webpack)\buildin\__webpack_console.js ***/
2012-08-07 04:19:15 +08:00
var console = (function() { return this["console"] || (this["window"] && this["window"].console) || {} }());
2012-04-05 20:59:01 +08:00
module.exports = console;
for(var name in {log:1, info:1, error:1, warn:1, dir:1, trace:1, assert:1})
if(!console[name])
console[name] = function() {};
2012-07-19 18:03:56 +08:00
var times = {};
2012-04-05 20:59:01 +08:00
if(!console.time)
console.time = function(label) {
times[label] = Date.now();
};
if(!console.timeEnd)
console.timeEnd = function() {
var duration = Date.now() - times[label];
console.log('%s: %dms', label, duration);
};
2012-03-27 06:00:51 +08:00
/******/},
/******/
/******/2: function(module, exports, require) {
2012-07-11 23:53:46 +08:00
/*** (webpack)\~\json-loader!.\test.json ***/
module.exports = {
"foobar": 1234
}
2012-03-27 06:00:51 +08:00
/******/},
/******/
/******/3: function(module, exports, require) {
2012-07-11 23:53:46 +08:00
/*** .\loader.js!.\file.js ***/
2012-04-05 21:08:49 +08:00
exports.answer = 42;
exports.foo = "bar";
2012-03-27 06:00:51 +08:00
/******/},
/******/
/******/})
```
2012-03-27 10:23:11 +08:00
# Console output
Prints in node.js (`node example.js`) and in browser:
```
{ answer: 42, foo: 'bar' }
{ foobar: 1234 }
{ foobar: 1234 }
```
2012-03-27 06:00:51 +08:00
# Info
## Uncompressed
```
2012-10-09 06:12:10 +08:00
Hash: 847d13b98159af41faccdda862ec3e8d
Compile Time: 53ms
2012-03-27 06:00:51 +08:00
Chunks: 1
2012-10-09 06:12:10 +08:00
Modules: 4
Modules including duplicates: 4
Modules first chunk: 4
main output.js: 2342 chars/bytes
<id> <size> <filename>
<reason> from <filename>
2012-03-27 06:00:51 +08:00
output.js
2012-10-09 06:12:10 +08:00
0 336 .\example.js
2012-03-27 06:00:51 +08:00
main
2012-08-07 04:19:15 +08:00
1 516 (webpack)\buildin\__webpack_console.js
2012-04-05 20:59:01 +08:00
require (3x) from .\example.js
2 36 (webpack)\~\json-loader!.\test.json
require (1x) from .\example.js
2012-04-05 20:59:01 +08:00
require (1x) from .\example.js
3 41 .\loader.js!.\file.js
2012-04-05 20:59:01 +08:00
require (1x) from .\example.js
2012-10-09 06:12:10 +08:00
ERROR: Cannot find module '../../require-polyfill'
Error: Module "../../require-polyfill" not found in context "."
Error: Non of this files exists: C:\Users\Sokrates\Eigene Repos\node_modules\webpack\require-polyfill, C:\Users\Sokrates\Eigene Repos\node_modules\webpack\require-polyfill.webpack.js, C:\Users\Sokrates\Eigene Repos\node_modules\webpack\require-polyfill.web.js, C:\Users\Sokrates\Eigene Repos\node_modules\webpack\require-polyfill.js
@ .\example.js (line 2, column 17)
2012-03-27 06:00:51 +08:00
```