+);
export default Site;
diff --git a/src/components/Site/Site.scss b/src/components/Site/Site.scss
index 3eeff2c7addd..c3bcb8611e46 100644
--- a/src/components/Site/Site.scss
+++ b/src/components/Site/Site.scss
@@ -3,8 +3,9 @@
flex-direction: column;
min-height: 100vh;
overflow: hidden;
+ overflow: -moz-scrollbars-none;
&.nav-displayed {
height: 100vh;
}
-}
\ No newline at end of file
+}
diff --git a/src/components/Splash/Splash.jsx b/src/components/Splash/Splash.jsx
index f41e2ec30dbc..a0790cb450f3 100644
--- a/src/components/Splash/Splash.jsx
+++ b/src/components/Splash/Splash.jsx
@@ -47,4 +47,7 @@ const Splash = () => (
);
+Splash.title = 'webpack';
+Splash.description = 'webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.';
+
export default Splash;
diff --git a/src/components/StarterKits/StarterKits.jsx b/src/components/StarterKits/StarterKits.jsx
index bb0dccd3bf9c..4711d8a0d8a2 100644
--- a/src/components/StarterKits/StarterKits.jsx
+++ b/src/components/StarterKits/StarterKits.jsx
@@ -10,7 +10,7 @@ import './StarterKits.scss';
// can use. This component could even use something like griddle
// to allow sorting and such.
-export default props => (
+const StarterKits = props => (
Starter Kits
@@ -70,3 +70,7 @@ export default props => (
);
+
+StarterKits.title = 'Starter Kits';
+
+export default StarterKits;
diff --git a/src/components/Vote/List.jsx b/src/components/Vote/Vote.jsx
similarity index 85%
rename from src/components/Vote/List.jsx
rename to src/components/Vote/Vote.jsx
index da1aeda25992..c93c910dae16 100644
--- a/src/components/Vote/List.jsx
+++ b/src/components/Vote/Vote.jsx
@@ -3,12 +3,12 @@ import Interactive from 'antwar-interactive';
import Container from '../Container/Container';
import VoteApp from './App';
import '../../styles';
-import './List.scss';
+import './Vote.scss';
import './App.scss';
import './Influence.scss';
import './Button/Button.scss';
-export default ({ section, page }) => {
+const Vote = ({ section, page }) => {
let arr = page.url.split('/');
let name = arr[arr.length - 1];
@@ -25,3 +25,7 @@ export default ({ section, page }) => {
);
};
+
+Vote.title = 'Vote';
+
+export default Vote;
diff --git a/src/components/Vote/List.scss b/src/components/Vote/Vote.scss
similarity index 100%
rename from src/components/Vote/List.scss
rename to src/components/Vote/Vote.scss
diff --git a/src/content/analyze.md b/src/content/analyze.md
deleted file mode 100644
index bc59ebe700ce..000000000000
--- a/src/content/analyze.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Analyze Tool
----
-
-Analyze content should go here.
-
diff --git a/src/content/api/cli.md b/src/content/api/cli.md
index 7f8e303c0de2..6a767f2427f4 100644
--- a/src/content/api/cli.md
+++ b/src/content/api/cli.md
@@ -1,5 +1,5 @@
---
-title: Command Line Interface (CLI)
+title: Command Line Interface
sort: 2
contributors:
- ev1stensberg
diff --git a/src/content/api/plugins/compilation.md b/src/content/api/compilation.md
similarity index 78%
rename from src/content/api/plugins/compilation.md
rename to src/content/api/compilation.md
index 7e7e5dcfab6f..56e0d1c1448a 100644
--- a/src/content/api/plugins/compilation.md
+++ b/src/content/api/compilation.md
@@ -1,72 +1,81 @@
---
title: Compilation
+group: Plugins
sort: 3
---
The Compilation instance extends from the compiler i.e. `compiler.compilation`. It is the literal compilation of all the objects in the require graph. This object has access to all the modules and their dependencies (most of which are circular references). In the compilation phase, modules are loaded, sealed, optimized, chunked, hashed and restored, etc. This would be the main lifecycle of any operations of the compilation.
-```javascript
+``` js
compiler.plugin("compilation", function(compilation) {
- //the main compilation instance
- //all subsequent methods are derived from compilation.plugin
+ // the main compilation instance
+ // all subsequent methods are derived from compilation.plugin
});
```
+
## `normal-module-loader`
The normal module loader, is the function that actually loads all the modules in the module graph (one-by-one).
-```javascript
+``` js
compilation.plugin('normal-module-loader', function(loaderContext, module) {
- //this is where all the modules are loaded
- //one by one, no dependencies are created yet
+ // this is where all the modules are loaded
+ // one by one, no dependencies are created yet
});
```
+
## `seal`
The sealing of the compilation has started.
-```javascript
+``` js
compilation.plugin('seal', function() {
- //you are not accepting any more modules
- //no arguments
+ // you are not accepting any more modules
+ // no arguments
});
```
+
## `optimize`
Optimize the compilation.
-```javascript
+``` js
compilation.plugin('optimize', function() {
- //webpack is begining the optimization phase
- // no arguments
+ // webpack is begining the optimization phase
+ // no arguments
});
```
+
## `optimize-tree(chunks, modules)` async
Async optimization of the tree.
-```javascript
+``` js
compilation.plugin('optimize-tree', function(chunks, modules) {
});
```
-#### `optimize-modules(modules: Module[])`
+### `optimize-modules(modules: Module[])`
+
Optimize the modules.
-```javascript
+
+``` js
compilation.plugin('optimize-modules', function(modules) {
- //handle to the modules array during tree optimization
+ // handle to the modules array during tree optimization
});
```
+
## `after-optimize-modules(modules: Module[])`
Optimizing the modules has finished.
+
## `optimize-chunks(chunks: Chunk[])`
Optimize the chunks.
@@ -90,73 +99,89 @@ compilation.plugin('optimize-chunks', function(chunks) {
Optimizing the chunks has finished.
+
## `revive-modules(modules: Module[], records)`
Restore module info from records.
+
## `optimize-module-order(modules: Module[])`
Sort the modules in order of importance. The first is the most important module. It will get the smallest id.
+
## `optimize-module-ids(modules: Module[])`
Optimize the module ids.
+
## `after-optimize-module-ids(modules: Module[])`
Optimizing the module ids has finished.
+
## `record-modules(modules: Module[], records)`
Store module info to the records.
+
## `revive-chunks(chunks: Chunk[], records)`
Restore chunk info from records.
+
## `optimize-chunk-order(chunks: Chunk[])`
Sort the chunks in order of importance. The first is the most important chunk. It will get the smallest id.
+
## `optimize-chunk-ids(chunks: Chunk[])`
Optimize the chunk ids.
+
## `after-optimize-chunk-ids(chunks: Chunk[])`
Optimizing the chunk ids has finished.
+
## `record-chunks(chunks: Chunk[], records)`
Store chunk info to the records.
+
## `before-hash`
Before the compilation is hashed.
+
## `after-hash`
After the compilation is hashed.
+
## `before-chunk-assets`
Before creating the chunk assets.
+
## `additional-chunk-assets(chunks: Chunk[])`
Create additional assets for the chunks.
+
## `record(compilation, records)`
Store info about the compilation to the records
+
## `additional-assets` async
Create additional assets for the compilation
Here's an example that downloads an image.
-```javascript
+``` js
compiler.plugin('compilation', function(compilation) {
compilation.plugin('additional-assets', function(callback) {
download('https://img.shields.io/npm/v/webpack.svg', function(resp) {
@@ -171,6 +196,7 @@ compiler.plugin('compilation', function(compilation) {
});
```
+
## `optimize-chunk-assets(chunks: Chunk[])` async
Optimize the assets for the chunks.
@@ -179,14 +205,14 @@ The assets are stored in `this.assets`, but not all of them are chunk assets. A
Here's an example that simply adds a banner to each chunk.
-```javascript
+``` js
compilation.plugin("optimize-chunk-assets", function(chunks, callback) {
- chunks.forEach(function(chunk) {
- chunk.files.forEach(function(file) {
- compilation.assets[file] = new ConcatSource("\/**Sweet Banner**\/", "\n", compilation.assets[file]);
- });
+ chunks.forEach(function(chunk) {
+ chunk.files.forEach(function(file) {
+ compilation.assets[file] = new ConcatSource("\/**Sweet Banner**\/", "\n", compilation.assets[file]);
});
- callback();
+ });
+ callback();
});
```
@@ -194,70 +220,77 @@ compilation.plugin("optimize-chunk-assets", function(chunks, callback) {
The chunk assets have been optimized. Here's an example plugin from [@boopathi](https://github.com/boopathi) that outputs exactly what went into each chunk.
-```javascript
+``` js
var PrintChunksPlugin = function() {};
+
PrintChunksPlugin.prototype.apply = function(compiler) {
- compiler.plugin('compilation', function(compilation, params) {
- compilation.plugin('after-optimize-chunk-assets', function(chunks) {
- console.log(chunks.map(function(c) {
- return {
- id: c.id,
- name: c.name,
- includes: c.modules.map(function(m) {
- return m.request;
- })
- };
- }));
- });
+ compiler.plugin('compilation', function(compilation, params) {
+ compilation.plugin('after-optimize-chunk-assets', function(chunks) {
+ console.log(chunks.map(function(c) {
+ return {
+ id: c.id,
+ name: c.name,
+ includes: c.modules.map(function(m) {
+ return m.request;
+ })
+ };
+ }));
});
+ });
};
```
+
## `optimize-assets(assets: Object{name: Source})` async
Optimize all assets.
The assets are stored in `this.assets`.
+
## `after-optimize-assets(assets: Object{name: Source})`
The assets has been optimized.
+
## `build-module(module)`
Before a module build has started.
-```javascript
+``` js
compilation.plugin('build-module', function(module){
- console.log('build module');
- console.log(module);
+ console.log('About to build: ', module);
});
```
+
## `succeed-module(module)`
A module has been built successfully.
-```javascript
+
+``` js
compilation.plugin('succeed-module', function(module){
- console.log('succeed module');
- console.log(module);
+ console.log('Successfully built: ', module);
});
```
+
## `failed-module(module)`
The module build has failed.
-```javascript
+
+``` js
compilation.plugin('failed-module', function(module){
- console.log('failed module');
- console.log(module);
+ console.log('Failed to build: ', module);
});
```
+
## `module-asset(module, filename)`
An asset from a module was added to the compilation.
+
## `chunk-asset(chunk, filename)`
An asset from a chunk was added to the compilation.
diff --git a/src/content/api/plugins/compiler.md b/src/content/api/compiler.md
similarity index 99%
rename from src/content/api/plugins/compiler.md
rename to src/content/api/compiler.md
index 98557eff1b31..bc303a0a78cb 100644
--- a/src/content/api/plugins/compiler.md
+++ b/src/content/api/compiler.md
@@ -1,5 +1,6 @@
---
title: Compiler
+group: Plugins
sort: 2
contributors:
- rishantagarwal
diff --git a/src/content/api/index.md b/src/content/api/index.md
index 4055cf92907e..81bec4054b84 100644
--- a/src/content/api/index.md
+++ b/src/content/api/index.md
@@ -1,5 +1,5 @@
---
-title: Webpack APIs
+title: Introduction
sort: 1
---
diff --git a/src/content/api/plugins/module-factories.md b/src/content/api/module-factories.md
similarity index 73%
rename from src/content/api/plugins/module-factories.md
rename to src/content/api/module-factories.md
index 28d5dad3d17a..fd2471ab1e7c 100644
--- a/src/content/api/plugins/module-factories.md
+++ b/src/content/api/module-factories.md
@@ -1,11 +1,14 @@
---
-title: Context/Normal Module Factories
+title: Module Factories
+group: Plugins
sort: 5
---
+?> Lead in...
+
## `NormalModuleFactory`
-### `before-resolve(data)` async waterfall
+`before-resolve(data)` async waterfall
Before the factory starts resolving. The `data` object has these properties:
@@ -14,7 +17,7 @@ Before the factory starts resolving. The `data` object has these properties:
Plugins are allowed to modify the object or to pass a new similar object to the callback.
-### `after-resolve(data)` async waterfall
+`after-resolve(data)` async waterfall
After the factory has resolved the request. The `data` object has these properties:
@@ -25,10 +28,17 @@ After the factory has resolved the request. The `data` object has these properti
* `resource`: The resource. It will be loaded by the NormalModule.
* `parser`: The parser that will be used by the NormalModule.
+
## `ContextModuleFactory`
-### `before-resolve(data)` async waterfall
+`before-resolve(data)` async waterfall
+
+?> Add documentation.
+
+`after-resolve(data)` async waterfall
+
+?> Add documentation.
-### `after-resolve(data)` async waterfall
+`alternatives(options: Array)` async waterfall
-### `alternatives(options: Array)` async waterfall
+?> Add documentation.
diff --git a/src/content/api/module-methods.md b/src/content/api/module-methods.md
index 94cb21476732..7cd7ce1cb70a 100644
--- a/src/content/api/module-methods.md
+++ b/src/content/api/module-methods.md
@@ -1,5 +1,6 @@
---
-title: Module API - Methods
+title: Module Methods
+group: Modules
sort: 3
contributors:
- skipjack
@@ -348,7 +349,7 @@ if(require.cache[require.resolveWeak('module')]) {
// Do something when module was loaded before...
}
-// You can perform dynamic resolves ("context")
+// You can perform dynamic resolves ("context")
// just as with other require/import methods.
const page = 'Foo';
__webpack_modules__[require.resolveWeak(`./page/${page}`)]
diff --git a/src/content/api/module-variables.md b/src/content/api/module-variables.md
index af9dc3a20f0f..43ead429ab96 100644
--- a/src/content/api/module-variables.md
+++ b/src/content/api/module-variables.md
@@ -1,6 +1,7 @@
---
-title: Module API - Variables
-sort: 3
+title: Module Variables
+group: Modules
+sort: 4
contributors:
- skipjack
- sokra
diff --git a/src/content/api/plugins/parser.md b/src/content/api/parser.md
similarity index 99%
rename from src/content/api/plugins/parser.md
rename to src/content/api/parser.md
index 3cd5d8689ead..b8a679228a3a 100644
--- a/src/content/api/plugins/parser.md
+++ b/src/content/api/parser.md
@@ -1,5 +1,6 @@
---
title: Parser
+group: Plugins
sort: 8
---
diff --git a/src/content/api/plugins/index.md b/src/content/api/plugins.md
similarity index 79%
rename from src/content/api/plugins/index.md
rename to src/content/api/plugins.md
index de21e720808d..fd3cd42edb3a 100644
--- a/src/content/api/plugins/index.md
+++ b/src/content/api/plugins.md
@@ -1,5 +1,6 @@
---
title: Plugin API
+group: Plugins
sort: 1
---
@@ -11,9 +12,9 @@ Many objects in webpack extend the `Tapable` class, which exposes a `plugin` met
A plugin is installed once as webpack starts up. webpack installs a plugin by calling its `apply` method, and passes a reference to the webpack `compiler` object. You may then call `compiler.plugin` to access asset compilations and their individual build steps. An example would look like this:
-```javascript
-// MyPlugin.js
+__my-plugin.js__
+``` js
function MyPlugin(options) {
// Configure your plugin with options...
}
@@ -40,28 +41,34 @@ MyPlugin.prototype.apply = function(compiler) {
module.exports = MyPlugin;
```
-Then in `webpack.config.js`
+__webpack.config.js__
-```javascript
- plugins: [
- new MyPlugin({options: 'nada'})
- ]
+``` js
+plugins: [
+ new MyPlugin({
+ options: 'nada'
+ })
+]
```
+
## Plugin Interfaces
There are two types of plugin interfaces.
-* Timing based
- * sync (default): As seen above. Use return.
- * async: Last parameter is a callback. Signature: function(err, result)
- * parallel: The handlers are invoked parallel (async).
+__Timing Based:__
+
+- sync (default): As seen above. Use return.
+- async: Last parameter is a callback. Signature: function(err, result)
+- parallel: The handlers are invoked parallel (async).
+
+__Return Value:__
+
+- not bailing (default): No return value.
+- bailing: The handlers are invoked in order until one handler returns something.
+- parallel bailing: The handlers are invoked in parallel (async). The first returned value (by order) is significant.
+- waterfall: Each handler gets the result value of the last handler as an argument.
-* Return value
- * not bailing (default): No return value.
- * bailing: The handlers are invoked in order until one handler returns something.
- * parallel bailing: The handlers are invoked in parallel (async). The first returned value (by order) is significant.
- * waterfall: Each handler gets the result value of the last handler as an argument.
## Tapable & Tapable instances
diff --git a/src/content/api/plugins/dependency.md b/src/content/api/plugins/dependency.md
deleted file mode 100644
index 844780bee8f5..000000000000
--- a/src/content/api/plugins/dependency.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Dependency
-sort: 7
----
-
-> TODO
diff --git a/src/content/api/plugins/tapable.md b/src/content/api/plugins/tapable.md
deleted file mode 100644
index 252a18364364..000000000000
--- a/src/content/api/plugins/tapable.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: Tapable
-sort: 1
-contributors:
- - thelarkinn
- - pksjce
- - e-cloud
----
-
-[Tapable](https://github.com/webpack/tapable) is small library that allows you to add and apply plugins to a javascript module.
-It can be inherited or mixed in to other modules. It is similar to NodeJS's `EventEmitter` class, focusing on custom event emission and manipulation.
-However, in addition to this, `Tapable` allows you to have access to the "emittee" or "producer" of the event through callbacks arguments.
-
-`Tapable` has four groups of member functions:
-
-* `plugin(name:string, handler:function)` - This allows a custom plugin to register into a **Tapable instance**'s event.
-This acts as the same as `on()` of `EventEmitter`, for registering a handler/listener to do something when the signal/event happens.
-
-* `apply(…pluginInstances: (AnyPlugin|function)[])` - `AnyPlugin` should be a class (or, rarely, an object) that has an `apply` method, or just a function with some registration code inside. This method is just to **apply** plugins' definition, so that the real event listeners can be registered into the **Tapable instance**'s registry.
-
-* `applyPlugins*(name:string, …)` - The **Tapable instance** can apply all the plugins under a particular hash using these functions.
-These group of method act like `emit()` of `EventEmitter`, to control the event emission meticulously with various strategy for various use cases.
-
-* `mixin(pt: Object)` - a simple method to extend `Tapable`'s prototype as a mixin rather than inheritance.
-
-The different `applyPlugins*` methods cover the following use cases:
-
-* Plugins can run serially
-
-* Plugins can run in parallel
-
-* Plugins can run one after the other but taking input from the previous plugin (waterfall)
-
-* Plugins can run asynchronously
-
-* Quit running plugins on bail: that is, once one plugin returns non-`undefined`, jump out of the run flow and return *the return of that plugin*. This sounds like `once()` of `EventEmitter` but is totally different.
-
-
-## Example
-
-One of webpack's **Tapable instances**, [Compiler](/api/plugins/compiler), is responsible for compiling the webpack configuration object and returning a [Compilation](/api/plugins/compilation) instance. When the Compilation instance runs, it creates the required bundles.
-
-See below is a simplified version of how this looks using `Tapable`.
-
-**node_modules/webpack/lib/Compiler.js**
-
-```javascript
-var Tapable = require("tapable");
-function Compiler() {
- Tapable.call(this);
-}
-Compiler.prototype = Object.create(Tapable.prototype);
-```
-
-Now to write a plugin on the compiler,
-
-**my-custom-plugin.js**
-
-```javascript
-function CustomPlugin() {}
-CustomPlugin.prototype.apply = function(compiler) {
- compiler.plugin('emit', pluginFunction);
-}
-```
-
-The compiler executes the plugin at the appropriate point in its lifecycle by
-
-**node_modules/webpack/lib/Compiler.js**
-
-```javascript
-this.apply*("emit",options) // will fetch all plugins under 'emit' name and run them.
-```
diff --git a/src/content/api/plugins/template.md b/src/content/api/plugins/template.md
deleted file mode 100644
index aece9d652874..000000000000
--- a/src/content/api/plugins/template.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-title: Templates
-sort: 8
----
-
-## MainTemplate
-
-### `startup(source, module, hash)`
-```javascript
- compilation.mainTemplate.plugin('startup', function(source, module, hash) {
- if (!module.chunks.length && source.indexOf('__ReactStyle__') === -1) {
- var originName = module.origins && module.origins.length ? module.origins[0].name : 'main';
- return ['if (typeof window !== "undefined") {',
- ' window.__ReactStyle__ = ' + JSON.stringify(classNames[originName]) + ';',
- '}'
- ].join('\n') + source;
- }
- return source;
- });
-```
-
-## HotUpdateChunkTemplate
-
-TODO
-
-## ChunkTemplate
-
-TODO
-
-## ModuleTemplate
-
-TODO
-
-## FunctionModuleTemplate
-
-TODO
diff --git a/src/content/api/plugins/resolver.md b/src/content/api/resolver.md
similarity index 99%
rename from src/content/api/plugins/resolver.md
rename to src/content/api/resolver.md
index c3ee55389434..765400a4cfb3 100644
--- a/src/content/api/plugins/resolver.md
+++ b/src/content/api/resolver.md
@@ -1,5 +1,6 @@
---
title: Resolver
+group: Plugins
sort: 5
---
diff --git a/src/content/api/stats.md b/src/content/api/stats.md
index 53c9f2d5c4ed..b6fd4eb5afdd 100644
--- a/src/content/api/stats.md
+++ b/src/content/api/stats.md
@@ -1,6 +1,6 @@
---
-title: Stats JSON
-sort: 1
+title: Stats Data
+sort: 3
contributors:
- skipjack
---
diff --git a/src/content/api/tapable.md b/src/content/api/tapable.md
new file mode 100644
index 000000000000..1a53564b8854
--- /dev/null
+++ b/src/content/api/tapable.md
@@ -0,0 +1,64 @@
+---
+title: Tapable
+group: Plugins
+sort: 1
+contributors:
+ - thelarkinn
+ - pksjce
+ - e-cloud
+---
+
+[Tapable](https://github.com/webpack/tapable) is small library that allows you to add and apply plugins to a javascript module. It can be inherited or mixed in to other modules. It is similar to NodeJS's `EventEmitter` class, focusing on custom event emission and manipulation. However, in addition to this, `Tapable` allows you to have access to the "emittee" or "producer" of the event through callbacks arguments.
+
+`Tapable` has four groups of member functions:
+
+- `plugin(name:string, handler:function)`: This allows a custom plugin to register into a **Tapable instance**'s event. This acts as the same as `on()` of `EventEmitter`, for registering a handler/listener to do something when the signal/event happens.
+- `apply(…pluginInstances: (AnyPlugin|function)[])`: `AnyPlugin` should be a class (or, rarely, an object) that has an `apply` method, or just a function with some registration code inside. This method is just to **apply** plugins' definition, so that the real event listeners can be registered into the _Tapable_ instance's registry.
+- `applyPlugins*(name:string, …)`: The _Tapable_ instance can apply all the plugins under a particular hash using these functions. These group of method act like `emit()` of `EventEmitter`, to control the event emission meticulously with various strategy for various use cases.
+- `mixin(pt: Object)`: a simple method to extend `Tapable`'s prototype as a mixin rather than inheritance.
+
+The different `applyPlugins*` methods cover the following use cases:
+
+- Plugins can run serially.
+- Plugins can run in parallel.
+- Plugins can run one after the other but taking input from the previous plugin (waterfall).
+- Plugins can run asynchronously.
+- Quit running plugins on bail: that is, once one plugin returns non-`undefined`, jump out of the run flow and return _the return of that plugin_. This sounds like `once()` of `EventEmitter` but is totally different.
+
+
+## Example
+
+One of webpack's _Tapable_ instances, [Compiler](/api/compiler), is responsible for compiling the webpack configuration object and returning a [Compilation](/api/compilation) instance. When the Compilation instance runs, it creates the required bundles.
+
+See below is a simplified version of how this looks using `Tapable`:
+
+__node_modules/webpack/lib/Compiler.js__
+
+``` js
+var Tapable = require("tapable");
+
+function Compiler() {
+ Tapable.call(this);
+}
+
+Compiler.prototype = Object.create(Tapable.prototype);
+```
+
+Now to write a plugin on the compiler,
+
+__my-custom-plugin.js__
+
+``` js
+function CustomPlugin() {}
+CustomPlugin.prototype.apply = function(compiler) {
+ compiler.plugin('emit', pluginFunction);
+}
+```
+
+The compiler executes the plugin at the appropriate point in its lifecycle by
+
+__node_modules/webpack/lib/Compiler.js__
+
+``` js
+this.apply*("emit",options) // will fetch all plugins under 'emit' name and run them.
+```
diff --git a/src/content/api/template.md b/src/content/api/template.md
new file mode 100644
index 000000000000..3824eafe9e8b
--- /dev/null
+++ b/src/content/api/template.md
@@ -0,0 +1,43 @@
+---
+title: Templates
+group: Plugins
+sort: 8
+---
+
+## MainTemplate
+
+### `startup(source, module, hash)`
+
+``` js
+compilation.mainTemplate.plugin('startup', function(source, module, hash) {
+ if (!module.chunks.length && source.indexOf('__ReactStyle__') === -1) {
+ var originName = module.origins && module.origins.length ? module.origins[0].name : 'main';
+ return [
+ 'if (typeof window !== "undefined") {',
+ ' window.__ReactStyle__ = ' + JSON.stringify(classNames[originName]) + ';',
+ '}'
+ ].join('\n') + source;
+ }
+ return source;
+});
+```
+
+
+## ModuleTemplate
+
+?> Document the `ModuleTemplate`...
+
+
+## ChunkTemplate
+
+?> Document the `ChunkTemplate`...
+
+
+## FunctionModuleTemplate
+
+?> Document the `FunctionModuleTemplate`...
+
+
+## HotUpdateChunkTemplate
+
+?> Document the `HotUpdateChunkTemplate`...
diff --git a/src/content/branding.md b/src/content/branding.md
index 5d428991f89a..219a3e83cbbe 100644
--- a/src/content/branding.md
+++ b/src/content/branding.md
@@ -1,5 +1,6 @@
---
title: Branding Guidelines
+sort: 2
contributors:
- jhnns
- skipjack
@@ -9,10 +10,7 @@ contributors:
Here you can find **webpack** project brand guidelines, assets, and license. See our official [media repository](https://github.com/webpack/media) for more information and to find the [license](https://github.com/webpack/media/blob/master/LICENSE) that governs this work. Click any of the images to download them.
-## [Jump to All Original Media Files](https://github.com/webpack/media)
-
-
-## The webpack Name
+## The Name
webpack should **always** be written in lower-case letters, even at the beginning of a sentence.
@@ -72,7 +70,7 @@ We use the beautiful [Geomanist Medium](http://geomanist.com/) font from the ext
The following colors are used throughout the site in various combinations and on our fancy clothing line launched with the help of [Open Collective](http://opencollective.com) and [Threadless](https://medium.com/u/840563ee2a56) over at the [official webpack store](https://webpack.threadless.com/collections/the-final-release-collection/)!
-| Color Name | HEX Code | RGB Code | Sample
+| Color Name | HEX Code | RGB Code | Sample
|---------------|---------------|-----------------------|-------------------------------
| Malibu: | HEX `#8dd6f9` | `rgb: 141, 214, 249` |
| Denim: | HEX `#1d78c1` | `rgb: 29, 120, 193` |
diff --git a/src/content/comparison.md b/src/content/comparison.md
index c4916a24504b..d42b1ef07d79 100644
--- a/src/content/comparison.md
+++ b/src/content/comparison.md
@@ -1,6 +1,6 @@
---
title: Comparison
-sort: 25
+sort: 1
contributors:
- pksjce
- bebraw
diff --git a/src/content/contribute/index.md b/src/content/contribute/index.md
new file mode 100644
index 000000000000..a24b26e7e88b
--- /dev/null
+++ b/src/content/contribute/index.md
@@ -0,0 +1,71 @@
+---
+title: Contribute
+sort: 1
+contributors:
+ - rouzbeh84
+ - scottdj92
+ - harrynewsome
+---
+
+The people who contribute to webpack do so for the love of open source, our users and ecosystem, and most importantly, pushing the web forward together. Because of our [Open Collective](http://opencollective.com/webpack) model for funding and transparency, we are able to funnel support and funds through contributors, dependent projects, and the contributor and core teams. To make a donation, simply click the button below...
+
+
+
+But what is the return on the investment?
+
+
+## Developers
+
+The biggest core feature we'd like to provide is enjoyable development experience. Developers like you can help by contributing to rich and vibrant documentation, issuing pull requests to help us cover niche use cases, and to help sustain what you love about webpack.
+
+### How Can I Help?
+
+Anybody can help by doing any of the following:
+
+- Ask your employer to use webpack in projects.
+- Help us write and maintain the content on this site (see the [writer's guide](/writers-guide)).
+- Contribute to the [core repository](https://github.com/webpack/webpack).
+- Become a backer or sponsor on [open collective](https://opencollective.com/webpack#support).
+
+### Encouraging Employers
+
+You can ask your employer to improve your workflow by leveraging webpack: an all-in-one tool for fonts, images and image optimiziation, and json. Explain to them how webpack will attempt to bundle your code and assets the best it can for the smallest file size, leading to speedier sites and applications.
+
+### Your Contributions
+
+Contributing to webpack is not contributing to an exclusive club. You as a developer are contributing to the overall health of downstream projects. Hundreds, if not thousands, of projects depend on webpack and contributing will make the ecosystem better for all users.
+
+The remainder of this section of the site is dedicated to developers such as yourself who would like to become a part of our ever-growing community:
+
+- [Writing a Loader](./how-to-write-a-loader)
+- [Writing a Plugin](./how-to-write-a-plugin)
+- [Plugin Patterns](./plugin-patterns)
+- [Release Process](./release-process)
+
+
+## Executives
+
+CTO's, VPs, and owners can help too!
+
+
+
+webpack is an all-in-one tool for bundling your code. It can handle fonts, images, data and more with the help of community-driven plugins and loaders. Having all of your assets be handled by one tool is immensely helpful, as you or your team can spend less time making sure a machine with many moving parts is working correctly and more time building your product.
+
+### Sponsorship
+
+Aside from monetary assistance, companies can support webpack by:
+
+- Providing developers that are not actively working on a project.
+- Contributing computing power for improved CI and regression testing.
+
+You can also encourage your developers to contribute to the ecosystem by open-sourcing webpack loaders, plugins and other utilities. And, as mentioned above, we would greatly appreciate any help increasing our CI/CD infrastructure.
+
+### Anyone Else
+
+To anyone else who is interested in helping our mission -- e.g. venture capitalists, government entities, digital agencies, etc. -- we would love for you to work with us, one of the top npm packages, to improve your product! Please don't hesitate to reach out with questions.
+
+
diff --git a/src/content/development/plugin-patterns.md b/src/content/contribute/plugin-patterns.md
similarity index 99%
rename from src/content/development/plugin-patterns.md
rename to src/content/contribute/plugin-patterns.md
index 8fbbbdbf5da6..9a5928ffa3e7 100644
--- a/src/content/development/plugin-patterns.md
+++ b/src/content/contribute/plugin-patterns.md
@@ -1,6 +1,6 @@
---
-title: Useful Plugin Patterns
-sort: 2
+title: Plugin Patterns
+sort: 4
---
Plugins grant unlimited opportunity to perform customizations within the webpack build system. This allows you to create custom asset types, perform unique build modifications, or even enhance the webpack runtime while using middleware. The following are some features of webpack that become useful while writing plugins.
diff --git a/src/content/development/release-process.md b/src/content/contribute/release-process.md
similarity index 61%
rename from src/content/development/release-process.md
rename to src/content/contribute/release-process.md
index 8851866c5eab..e18fc59b489f 100644
--- a/src/content/development/release-process.md
+++ b/src/content/contribute/release-process.md
@@ -1,15 +1,20 @@
---
-title: webpack merge, tag and release process
+title: Release Process
+sort: 5
contributors:
- d3viant0ne
- sokra
---
-## Pull requests into `master`
+The release process for deploying webpack is actually quite painless. Read through the following steps, so you have a clear understanding of how it's done.
-When you land commits on your `master` branch, select the _Create Merge-Commit_ option.
-## Cut a release
+## Pull Requests
+
+When merging pull requests into the `master` branch, select the _Create Merge Commit_ option.
+
+
+## Releasing
```sh
npm version patch && git push --follow-tags && npm publish
diff --git a/src/content/writers-guide.md b/src/content/contribute/writers-guide.md
similarity index 100%
rename from src/content/writers-guide.md
rename to src/content/contribute/writers-guide.md
diff --git a/src/content/development/how-to-write-a-loader.md b/src/content/contribute/writing-a-loader.md
similarity index 98%
rename from src/content/development/how-to-write-a-loader.md
rename to src/content/contribute/writing-a-loader.md
index a0022a3139e9..eb53fc7f73d2 100644
--- a/src/content/development/how-to-write-a-loader.md
+++ b/src/content/contribute/writing-a-loader.md
@@ -1,6 +1,6 @@
---
-title: How to write a loader?
-sort: 3
+title: Writing a Loader
+sort: 2
contributors:
- asulaiman
---
@@ -19,7 +19,7 @@ The loader is expected to give back one or two values. The first value is a resu
In the complex case, when multiple loaders are chained, only the last loader gets the resource file and only the first loader is expected to give back one or two values (JavaScript and SourceMap). Values that any other loader give back are passed to the previous loader.
-In other words, chained loaders are executed in reverse order -- either right to left or bottom to top depending on the format of your array. Lets say you have two loaders that go by the name of `foo-loader` and `bar-loader`. You would like to execute `foo-loader` and then pass the result of the transformation from `foo-loader` finally to `bar-loader`.
+In other words, chained loaders are executed in reverse order -- either right to left or bottom to top depending on the format of your array. Lets say you have two loaders that go by the name of `foo-loader` and `bar-loader`. You would like to execute `foo-loader` and then pass the result of the transformation from `foo-loader` finally to `bar-loader`.
You would add the following in your config file (assuming that both loaders are already defined):
@@ -37,7 +37,7 @@ module: {
}
```
-Note that webpack currently only searches in your node modules folder for loaders. If these loaders are defined outside your node modules folder you would need to use the `resolveLoader` property to get webpack to include your loaders. For example lets say you have your custom loaders included in a folder called `loaders`. You would have to add the following to your config file:
+Note that webpack currently only searches in your node modules folder for loaders. If these loaders are defined outside your node modules folder you would need to use the `resolveLoader` property to get webpack to include your loaders. For example lets say you have your custom loaders included in a folder called `loaders`. You would have to add the following to your config file:
``` javascript
resolveLoader: {
diff --git a/src/content/development/how-to-write-a-plugin.md b/src/content/contribute/writing-a-plugin.md
similarity index 99%
rename from src/content/development/how-to-write-a-plugin.md
rename to src/content/contribute/writing-a-plugin.md
index 4fa6975eb2c3..61bf0ada7f66 100644
--- a/src/content/development/how-to-write-a-plugin.md
+++ b/src/content/contribute/writing-a-plugin.md
@@ -1,6 +1,6 @@
---
-title: How to write a plugin?
-sort: 2
+title: Writing a Plugin
+sort: 3
---
Plugins expose the full potential of the webpack engine to third-party developers. Using staged build callbacks, developers can introduce their own behaviors into the webpack build process. Building plugins is a bit more advanced than building loaders, because you'll need to understand some of the webpack low-level internals to hook into them. Be prepared to read some source code!
diff --git a/src/content/development/index.md b/src/content/development/index.md
deleted file mode 100644
index f245c10538ee..000000000000
--- a/src/content/development/index.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: Development
-contributors:
- - rouzbeh84
----
-
-These guides cover what you need to know in order to develop webpack.
-
-* [Release Process](./release-process)
-* [Plugin Patterns](./plugin-patterns)
-* [How To Write A Plugin](./how-to-write-a-plugin)
-* [How To Write A Loader](./how-to-write-a-loader)
diff --git a/src/content/glossary.md b/src/content/glossary.md
index 33e33107dde4..928fe6f3cda1 100644
--- a/src/content/glossary.md
+++ b/src/content/glossary.md
@@ -1,5 +1,6 @@
---
title: Glossary
+sort: 3
contributors:
- rouzbeh84
- bebraw
diff --git a/src/content/license.md b/src/content/license.md
index 7e0edd6f7600..e68040d7346a 100644
--- a/src/content/license.md
+++ b/src/content/license.md
@@ -1,5 +1,6 @@
---
title: License
+sort: 4
---
## webpack
diff --git a/src/content/support/index.md b/src/content/support/index.md
deleted file mode 100644
index f8047c97a4fd..000000000000
--- a/src/content/support/index.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: Why Support webpack?
-contributors:
- - scottdj92
- - harrynewsome
----
-
-First, the people who contribute to webpack, do so for the love of open source, love for our users and ecosystem, and most importantly, pushing the web forward together. Because of our [Open Collective](http://opencollective.com/webpack) model for funding and transparency, we are able to funnel support and funds through contributors, dependent projects, and the contributor and core teams. But what is the return on the investment?
-
-
-## Developers
-
-The biggest core feature that we want to give you is enjoyment of using webpack. Developers like you can help by contributing to rich and vibrant documentation, issuing pull requests to help us cover niche use cases, and to help sustain what you love about webpack.
-
-
-### How Can I Help?
-
-Anybody can help by doing any of the following:
-
-* Submit documentation corrections/enhancements to [webpack.js.org](https://github.com/webpack/webpack.js.org) (read the [Writer's guide](/writers-guide) beforehand)
-* Contribute code to [webpack](https://github.com/webpack/webpack) (see this handy [Development guide](/development/) made for you)
-* [Donate](https://opencollective.com/webpack/donate) to our [open collective](https://opencollective.com/webpack)
-* [Sponsor webpack](https://opencollective.com/webpack#support)
-* Ask your employer to use webpack in projects
-
-
-### How Can I Ask My Employer To Use webpack?
-
-You can ask your employer to improve your workflow by leveraging webpack: an all-in-one tool for fonts, images and image optimiziation, and json. webpack will attempt to bundle your code and assets the best it can for the smallest file size, which means a faster web site/app.
-
-
-### Your Contributions Are Important To Us
-
-Contributing to webpack is not contributing to an exclusive club. You as a developer are contributing to the overall health of downstream projects. Hundreds, maybe more, projects depend on webpack and contributing will make the ecosystem better for all users.
-
-
-## CTO's, VPs, Owners
-
-
-
-webpack is an all-in-one tool for bundling your code. It can handle fonts, images, svgs, and more with the help of plugins. Having all of your assets be handled by one tool is immensely helpful, as you or your team can spend less time making sure a machine with many moving parts is working correctly and more time building your product.
-
-
-### How You Can Support webpack as a Company
-
-You can support webpack as a company by:
-
-* Contributing developers that are not actively working on a project
-* Contributing computing power for improved CI and regression testing
-
-
-### I Can't Provide These Things, What Else Can I Do?
-
-You can encourage your developers to contribute to the ecosystem, open sourcing tools, loaders, and plugins for webpack, and helping increase our CI/CD infrastructure.
-
-
-## VC, Government, Digital Agencies
-
-We want you to work with us, one of the top NPM libraries, to improve your product!
-
-
diff --git a/template.ejs b/template.ejs
index 4dd8cc0016df..bc771ea4481d 100644
--- a/template.ejs
+++ b/template.ejs
@@ -8,7 +8,7 @@
-
+
<% for (var file of htmlWebpackPlugin.options.context.cssFiles) { %>
+
+