diff --git a/README.md b/README.md index 3605fce58..55cdef0d6 100644 --- a/README.md +++ b/README.md @@ -151,6 +151,69 @@ There is a warning emitted in this case. *Warning: The complete code in the directory are included. So use it carefully.* +## Loaders + +You can use a syntax for loader plugins to preprocess files before emitting javascript code to the bundle. + +The following example loads the raw content of a file with the `raw` loader: + +``` javascript +var content = require("raw!./file.txt"); +``` + +Multiple loader plugins can be prepended by seperating them with `!`. +The loader plugins are resolved like in normal `require` call but with different default extension. + +The `raw` loader plugin is looked up at modules `raw-webpack-web-loader`, `raw-webpack-loader`, `raw-web-loader`, `raw-loader`, `raw` +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`. +Note that the `web-` versions are omitted if loaders are used in node.js. + +See [example](modules-webpack/tree/master/examples/loader). + +The following loaders are included as optional dependencies: + +* `raw`: Loads raw content of a file +* `json` (default at `.json`): Loads file as JSON +* `jade` (default at `.jade`): Loads jade template and returns a function +* `coffee` (default at `.coffee`): Loads coffee-script like javascript + +TODO + +* `css`: CSS rules are added to DOM on require +* `less`, `sass`: like `css` but compiles + +## TL;DR + +``` javascript +var a = require("a"); // require modules +var b = require("./b"); // and files + // like in node.js + +// polyfill require method to use the new members in node.js too +require = require("webpack/require-polyfill")(require.valueOf()); + +// create a lazy loaded bundle +require.ensure([], function(require) { + var c = require("c"); + + // require json + var packageJson = require("../package.json"); + + // or jade templates, coffee-script, and many more with own loaders + var result = require("./template.jade")(require("./dataFrom.coffee")); + + // files are compiled to javascript and packed into the bundle... +}); +``` + +... and compile from the shell with: + +``` +webpack lib/input.js js/output.js +``` + +try `--min` to minimize with `uglify-js`. + ## Limitations ### `require`-function @@ -183,7 +246,7 @@ Here is a list of possible useful replacements: * `http=http-browserify` * `vm=vm-browserify` -* +* * TODO provide some more replacements ## Usage @@ -621,37 +684,6 @@ else `stats` as json see [example](modules-webpack/tree/master/examples/code-spl -## Loaders - -You can use a syntax for loader plugins to preprocess files before emitting javascript code to the bundle. - -The following example loads the raw content of a file with the `raw` loader: - -``` javascript -var content = require("raw!./file.txt"); -``` - -Multiple loader plugins can be prepended by seperating them with `!`. -The loader plugins are resolved like in normal `require` call but with different default extension. - -The `raw` loader plugin is looked up at modules `raw-webpack-web-loader`, `raw-webpack-loader`, `raw-web-loader`, `raw-loader`, `raw` -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`. -Note that the `web-` versions are omitted if loaders are used in node.js. - -See [example](modules-webpack/tree/master/examples/loader). - -The following loaders are included as optional dependencies: - -* `raw`: Loads raw content of a file -* `json` (default at `.json`): Loads file as JSON -* `jade` (default at `.jade`): Loads jade template and returns a function -* `coffee` (default at `.coffee`): Loads coffee-script like javascript - -TODO - -* `css`: CSS rules are added to DOM on require -* `less`, `sass`: like `css` but compiles - ## Tests @@ -674,14 +706,6 @@ You are also welcome to correct any spelling mistakes or any language issues, be ## Future plans -* resources `module.resource("./a.txt")` -* loader plugins - * `require("css!./style.css")` - * `--loader .coffee=coffee-webpack-loader` - * default loaders: `js`, `coffee`, `jade`, `json` - * optional included loaders: `css`, `less`, ... - * `module.resource("ror13!./a.txt");` - * loader is a exported `function([content], callback /* function(err, content) */)` * more polyfills for node.js buildin modules, but optional * require from protocol `require("http://...")` diff --git a/examples/loader/README.md b/examples/loader/README.md index 8c3230732..2ee554358 100644 --- a/examples/loader/README.md +++ b/examples/loader/README.md @@ -129,6 +129,16 @@ module.exports = {"foobar":1234} /******/}) ``` +# Console output + +Prints in node.js (`node example.js`) and in browser: + +``` +{ answer: 42, foo: 'bar' } +{ foobar: 1234 } +{ foobar: 1234 } +``` + # Info ## Uncompressed