Skip to content

Commit f2a28a7

Browse files
sokrasokra
committed
documentation for examples
1 parent 0dd1a69 commit f2a28a7

10 files changed

Lines changed: 326 additions & 237 deletions

File tree

‎examples/component/README.md‎

Lines changed: 113 additions & 109 deletions
Large diffs are not rendered by default.

‎examples/component/template.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
This example demonstrates the usage of [component](https://github.com/component/component) built with webpack.
2+
3+
Components declare scripts and styles in a special `component.json` file. This file is handled by the plugin. In addition to that there is a different resolution algorithm for components.
4+
5+
You can see that the component-webpack-plugin handles these components including scripts, styles and other assets.
16

27
# example.js
38

‎examples/externals/README.md‎

Lines changed: 35 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,19 @@
1+
This example demonstrate how to build a library with webpack that has dependencies to other libraries which should not be included in the compiled version.
2+
3+
We use the `libraryTarget: "umd"` option to build a UMD module that is consumable in CommonJs, AMD and with script tags. We don't specify the `library` option so the library is exported to the root namespace.
4+
5+
We use the `externals` option to define dependencies that should be resolved in the target environment.
6+
7+
In the simple case we just need to specify a string (`"add"`). Than it's resolved as `"add"` module in CommonJs and AMD, and as global `add` when used with script tag.
8+
9+
In the complex case we specify different values for each environment:
10+
11+
| environment | config value | resolved as |
12+
|--------------------|--------------------------|------------------------------|
13+
| CommonJs (strict) | `["./math", "subtract"]` | `require("./math").subtract` |
14+
| CommonJs (node.js) | `"./subtract"` | `require("./subtract")` |
15+
| AMD | `"subtract"` | `define(["subtract"], ...)` |
16+
| script tag | `"subtract"` | `this.subtract` |
117

218
# example.js
319

@@ -43,44 +59,43 @@ module.exports = {
4359
}
4460
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__) {
4561
return /******/ (function(modules) { // webpackBootstrap
46-
/******/
4762
/******/ // The module cache
4863
/******/ var installedModules = {};
49-
/******/
64+
/******/
5065
/******/ // The require function
5166
/******/ function __webpack_require__(moduleId) {
67+
/******/
5268
/******/ // Check if module is in cache
5369
/******/ if(installedModules[moduleId])
5470
/******/ return installedModules[moduleId].exports;
55-
/******/
71+
/******/
5672
/******/ // Create a new module (and put it into the cache)
5773
/******/ var module = installedModules[moduleId] = {
5874
/******/ exports: {},
5975
/******/ id: moduleId,
6076
/******/ loaded: false
6177
/******/ };
62-
/******/
78+
/******/
6379
/******/ // Execute the module function
6480
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
65-
/******/
81+
/******/
6682
/******/ // Flag the module as loaded
6783
/******/ module.loaded = true;
68-
/******/
84+
/******/
6985
/******/ // Return the exports of the module
7086
/******/ return module.exports;
7187
/******/ }
72-
/******/
73-
/******/
88+
/******/
89+
/******/
7490
/******/ // expose the modules object (__webpack_modules__)
7591
/******/ __webpack_require__.m = modules;
76-
/******/
92+
/******/
7793
/******/ // expose the module cache
7894
/******/ __webpack_require__.c = installedModules;
79-
/******/
95+
/******/
8096
/******/ // __webpack_public_path__
8197
/******/ __webpack_require__.p = "js/";
82-
/******/
83-
/******/
98+
/******/
8499
/******/ // Load entry module and return exports
85100
/******/ return __webpack_require__(0);
86101
/******/ })
@@ -118,19 +133,18 @@ return /******/ (function(modules) { // webpackBootstrap
118133
/***/ }
119134
/******/ ])
120135
})
121-
122136
```
123137

124138
# Info
125139

126140
## Uncompressed
127141

128142
```
129-
Hash: fe82a5dbd0c1deac91fe
130-
Version: webpack 1.1.0
131-
Time: 55ms
143+
Hash: b71fd8ed4ddc8b851798
144+
Version: webpack 1.3.2-beta7
145+
Time: 33ms
132146
Asset Size Chunks Chunk Names
133-
output.js 3045 0 [emitted] main
147+
output.js 3008 0 [emitted] main
134148
chunk {0} output.js (main) 197 [rendered]
135149
> main [0] ./example.js
136150
[0] ./example.js 113 {0} [built]
@@ -139,11 +153,11 @@ chunk {0} output.js (main) 197 [rendered]
139153
## Minimized (uglify-js, no zip)
140154

141155
```
142-
Hash: d8b6f8b3302f36a609b5
143-
Version: webpack 1.1.0
144-
Time: 147ms
156+
Hash: 67a052a42079fa51aad1
157+
Version: webpack 1.3.2-beta7
158+
Time: 80ms
145159
Asset Size Chunks Chunk Names
146-
output.js 706 0 [emitted] main
160+
output.js 706 0 [emitted] main
147161
chunk {0} output.js (main) 197 [rendered]
148162
> main [0] ./example.js
149163
[0] ./example.js 113 {0} [built]

‎examples/externals/template.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,19 @@
1+
This example demonstrate how to build a library with webpack that has dependencies to other libraries which should not be included in the compiled version.
2+
3+
We use the `libraryTarget: "umd"` option to build a UMD module that is consumable in CommonJs, AMD and with script tags. We don't specify the `library` option so the library is exported to the root namespace.
4+
5+
We use the `externals` option to define dependencies that should be resolved in the target environment.
6+
7+
In the simple case we just need to specify a string (`"add"`). Than it's resolved as `"add"` module in CommonJs and AMD, and as global `add` when used with script tag.
8+
9+
In the complex case we specify different values for each environment:
10+
11+
| environment | config value | resolved as |
12+
|--------------------|--------------------------|------------------------------|
13+
| CommonJs (strict) | `["./math", "subtract"]` | `require("./math").subtract` |
14+
| CommonJs (node.js) | `"./subtract"` | `require("./subtract")` |
15+
| AMD | `"subtract"` | `define(["subtract"], ...)` |
16+
| script tag | `"subtract"` | `this.subtract` |
117

218
# example.js
319

‎examples/labeled-modules/README.md‎

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
This example show how to add support for Labeled Modules by adding the plugin to the configuration.
2+
13
# example.js
24

35
``` javascript
@@ -6,6 +8,17 @@ var a = 1;
68
increment(a); // 2
79
```
810

11+
# webpack.config.js
12+
13+
``` javascript
14+
var webpack = require("../../");
15+
module.exports = {
16+
plugins: [
17+
new webpack.dependencies.LabeledModulesPlugin()
18+
]
19+
}
20+
```
21+
922
# increment.js
1023

1124
``` javascript
@@ -31,44 +44,43 @@ exports: function add() {
3144

3245
``` javascript
3346
/******/ (function(modules) { // webpackBootstrap
34-
/******/
3547
/******/ // The module cache
3648
/******/ var installedModules = {};
37-
/******/
49+
/******/
3850
/******/ // The require function
3951
/******/ function __webpack_require__(moduleId) {
52+
/******/
4053
/******/ // Check if module is in cache
4154
/******/ if(installedModules[moduleId])
4255
/******/ return installedModules[moduleId].exports;
43-
/******/
56+
/******/
4457
/******/ // Create a new module (and put it into the cache)
4558
/******/ var module = installedModules[moduleId] = {
4659
/******/ exports: {},
4760
/******/ id: moduleId,
4861
/******/ loaded: false
4962
/******/ };
50-
/******/
63+
/******/
5164
/******/ // Execute the module function
5265
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
53-
/******/
66+
/******/
5467
/******/ // Flag the module as loaded
5568
/******/ module.loaded = true;
56-
/******/
69+
/******/
5770
/******/ // Return the exports of the module
5871
/******/ return module.exports;
5972
/******/ }
60-
/******/
61-
/******/
73+
/******/
74+
/******/
6275
/******/ // expose the modules object (__webpack_modules__)
6376
/******/ __webpack_require__.m = modules;
64-
/******/
77+
/******/
6578
/******/ // expose the module cache
6679
/******/ __webpack_require__.c = installedModules;
67-
/******/
80+
/******/
6881
/******/ // __webpack_public_path__
6982
/******/ __webpack_require__.p = "js/";
70-
/******/
71-
/******/
83+
/******/
7284
/******/ // Load entry module and return exports
7385
/******/ return __webpack_require__(0);
7486
/******/ })
@@ -122,11 +134,11 @@ The remaining labels are removed while minimizing.
122134
## Uncompressed
123135

124136
```
125-
Hash: a09dcd87bf9b88c5e137
126-
Version: webpack 1.1.0
127-
Time: 57ms
137+
Hash: f8fc9eca6fb91df6e48a
138+
Version: webpack 1.3.2-beta7
139+
Time: 35ms
128140
Asset Size Chunks Chunk Names
129-
output.js 2462 0 [emitted] main
141+
output.js 2425 0 [emitted] main
130142
chunk {0} output.js (main) 299 [rendered]
131143
> main [0] ./example.js
132144
[0] ./example.js 55 {0} [built]
@@ -139,11 +151,11 @@ chunk {0} output.js (main) 299 [rendered]
139151
## Minimized (uglify-js, no zip)
140152

141153
```
142-
Hash: 11e5fd17e7fdce2603db
143-
Version: webpack 1.1.0
144-
Time: 123ms
154+
Hash: 34470e6917b261b891ed
155+
Version: webpack 1.3.2-beta7
156+
Time: 75ms
145157
Asset Size Chunks Chunk Names
146-
output.js 427 0 [emitted] main
158+
output.js 427 0 [emitted] main
147159
chunk {0} output.js (main) 299 [rendered]
148160
> main [0] ./example.js
149161
[0] ./example.js 55 {0} [built]

‎examples/labeled-modules/template.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
1+
This example show how to add support for Labeled Modules by adding the plugin to the configuration.
2+
13
# example.js
24

35
``` javascript
46
{{example.js}}
57
```
68

9+
# webpack.config.js
10+
11+
``` javascript
12+
{{webpack.config.js}}
13+
```
14+
715
# increment.js
816

917
``` javascript

0 commit comments

Comments
 (0)