+);
export default Site;
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..4c0e734fe0a3 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
@@ -17,11 +17,9 @@ related:
url: https://medium.com/@nimgrg/analysing-and-minimising-the-size-of-client-side-bundle-with-webpack-and-source-map-explorer-41096559beca#.c3t2srr8x
---
-webpack provides a Command Line Interface (CLI) to configure and interact with your build. This is mostly useful in case of early prototyping, profiling, writing npm scripts or personal customization of the build.
-
For proper usage and easy distribution of this configuration, webpack can be configured with `webpack.config.js`. Any parameters sent to the CLI will map to a corresponding parameter in the config file.
-Have a look at the [installation guide](/guides/installation) unless you have webpack already running.
+Have a look at the [installation guide](/guides/installation) if you don't already have webpack installed.
T> The new CLI for webpack is under development. New features are being added such as the `--init` flag. [Check it out!](https://github.com/webpack/webpack-cli)
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..d61ab74b4256 100644
--- a/src/content/api/index.md
+++ b/src/content/api/index.md
@@ -1,11 +1,41 @@
---
-title: Webpack APIs
+title: Introduction
sort: 1
---
-The following interfaces provide access to the compilation process in different ways:
+A variety of interfaces are available to customize the compilation process. Some features overlap between interfaces, e.g. a configuration option may be available via a CLI flag, while others exist only through a single interface. The following high-level information should get you started.
-* [CLI](/api/cli)
-* [Node](/api/node)
-* [Loaders](/api/loaders)
-* [Plugins](/api/plugins)
+
+## CLI
+
+The Command Line Interface (CLI) to configure and interact with your build. It is especially useful in the case of early prototyping and profiling. For the most part, the CLI is simply used to kick off the process using a configuration file and a few flags (e.g. `--env`).
+
+[Learn more!](/api/cli)
+
+
+## Module
+
+When processing modules with webpack, it is important to understand the different module syntaxes -- specifically the [methods](/api/module-methods) and [variables](/api/module-variables) -- that are supported.
+
+[Learn more!](/api/module-methods)
+
+
+## Node
+
+While most users can get away with just using the CLI along with a configuration file, more fine-grained control of the compilation can be achieved via the Node interface. This includes passing multiple configurations, programatically running or watching, and collecting stats.
+
+[Learn more!](/api/node)
+
+
+## Loaders
+
+Loaders are transformations that are applied to the source code of a module. They are written as functions that take accept source code as a parameter and return a new version of that code with tranformations applied.
+
+[Learn more!](/api/loaders)
+
+
+## Plugins
+
+The plugin interface provided by webpack allows users to tap directly into the compilation process. Plugins can register handlers on lifecycle hooks that run at different points in the compilation process. When each hook is executed, the plugin will have full access to the current state of the compilation.
+
+[Learn more!](/api/plugins)
diff --git a/src/content/api/loaders.md b/src/content/api/loaders.md
index 5b7cf6561b6f..16ffb1b4f006 100644
--- a/src/content/api/loaders.md
+++ b/src/content/api/loaders.md
@@ -4,13 +4,8 @@ sort: 4
contributors:
- TheLarkInn
- jhnns
-
---
-Loaders are transformations that are applied on the source code of a module. They are functions (running in Node.js) that take the source of a resource file as the parameter and return the new source.
-
-## How to write a loader
-
A loader is just a JavaScript module that exports a function. The [loader runner](https://github.com/webpack/loader-runner) calls this function and passes the result of the previous loader or the resource file into it. The `this` context of the function is filled-in by webpack and the [loader runner](https://github.com/webpack/loader-runner) with some useful methods that allow the loader (among other things) to change its invocation style to async, or get query parameters.
The first loader is passed one argument: the content of the resource file. The compiler expects a result from the last loader. The result should be a `String` or a `Buffer` (which is converted to a string), representing the JavaScript source code of the module. An optional SourceMap result (as JSON object) may also be passed.
@@ -26,7 +21,7 @@ A single result can be returned in **sync mode**. For multiple results the `this
```javascript
module.exports = function(content) {
- return someSyncOperation(content);
+ return someSyncOperation(content);
};
```
@@ -34,8 +29,8 @@ module.exports = function(content) {
```javascript
module.exports = function(content) {
- this.callback(null, someSyncOperation(content), sourceMaps, ast);
- return; // always return undefined when calling callback()
+ this.callback(null, someSyncOperation(content), sourceMaps, ast);
+ return; // always return undefined when calling callback()
};
```
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 59%
rename from src/content/api/plugins/index.md
rename to src/content/api/plugins.md
index de21e720808d..7d1f17ba4196 100644
--- a/src/content/api/plugins/index.md
+++ b/src/content/api/plugins.md
@@ -1,19 +1,33 @@
---
title: Plugin API
-sort: 1
+group: Plugins
+sort: 0
---
-T> For a high-level introduction to writing plugins, start with [How to write a plugin](/development/how-to-write-a-plugin).
-
-webpack provides flexible and powerful customization api in the form of plugins. Using plugins, we can plug functionality into webpack. Additionally, webpack provides lifecycle hooks into which plugins can be registered. At each of these lifecycle points, webpack will run all of the registered plugins and provide them with the current state of the webpack compilation.
+T> For a high-level introduction to writing plugins, start with [writing a plugin](/contribute/writing-a-plugin).
Many objects in webpack extend the `Tapable` class, which exposes a `plugin` method. And with the `plugin` method, plugins can inject custom build steps. You will see `compiler.plugin` and `compilation.plugin` used a lot. Essentially, each one of these plugin calls binds a callback to fire at specific steps throughout the build process.
+There are two types of plugin interfaces...
+
+__Timing Based__
+
+- sync (default): The plugin runs synchronously and returns its output.
+- async: The plugin runs asynchronously and uses the give `callback` to return its output.
+- parallel: The handlers are invoked in parallel.
+
+__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.
+
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,30 +54,18 @@ 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).
-
-* 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
+## Tapable & Tapable Instances
The plugin architecture is mainly possible for webpack due to an internal library named `Tapable`.
**Tapable Instances** are classes in the webpack source code which have been extended or mixed in from class `Tapable`.
@@ -71,4 +73,4 @@ The plugin architecture is mainly possible for webpack due to an internal librar
For plugin authors, it is important to know which are the `Tapable` instances in the webpack source code. These instances provide a variety of event hooks into which custom plugins can be attached.
Hence, throughout this section are a list of all of the webpack `Tapable` instances (and their event hooks), which plugin authors can utilize.
-For more information on `Tapable` visit the [tapable repository](https://github.com/webpack/tapable) or visit the [complete overview](./tapable)
+For more information on `Tapable` visit the [complete overview](/api/tapable) or the [tapable repository](https://github.com/webpack/tapable).
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 97%
rename from src/content/writers-guide.md
rename to src/content/contribute/writers-guide.md
index 0a8c9e2086de..bc1c743377a5 100644
--- a/src/content/writers-guide.md
+++ b/src/content/contribute/writers-guide.md
@@ -91,9 +91,9 @@ Same goes for tables.
The [configuration](/configuration) properties should be ordered alphabetically as well:
-* `devServer.contentBase`
-* `devServer.compress`
-* `devServer.hot`
+- `devServer.contentBase`
+- `devServer.compress`
+- `devServer.hot`
### Quotes
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 1bb519107c6e..f7d4a2f76c84 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) { %>
+
+