Skip to content

Add Glossary Page #1223

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 17 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion content/api/module-methods.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ related:
url: https://en.wikipedia.org/wiki/Asynchronous_module_definition
---

This is section covers all methods available in code compiled with webpack. When using webpack to bundle your application, you have a can pick from a variety of module syntax styles including [ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-_ECMAScript_2015), [CommonJS](https://en.wikipedia.org/wiki/CommonJS), and [AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition).
This section covers all methods available in code compiled with webpack. When using webpack to bundle your application, you can pick from a variety of module syntax styles including [ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-_ECMAScript_2015), [CommonJS](https://en.wikipedia.org/wiki/CommonJS), and [AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition).


## ES6 (Recommended)
Expand Down
4 changes: 3 additions & 1 deletion content/configuration/dev-server.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@ If you're using dev-server through the Node.js API, the options in `devServer` w

W> Be aware that when [exporting multiple configurations](/configuration/configuration-types/#exporting-multiple-configurations) only the `devServer` options for the first configuration will be taken into account and used for all the configurations in the array.

T> If you're having trouble, navigating to the `/webpack-dev-server` route will show where files are served. For example, `http://localhost:9000/webpack-dev-server`.


## `devServer.clientLogLevel`

Expand Down Expand Up @@ -272,7 +274,7 @@ Shows a full-screen overlay in the browser when there are compiler errors or war
overlay: true
```

If you want to show warnings as well as errors:
If you want to show warnings as well as errors:

```js
overlay: {
Expand Down
95 changes: 95 additions & 0 deletions content/glossary.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
# Glossary

## A

- [**Asset**](/guides/asset-management/): This a general term for the images, fonts, media, and any other kind of files that are typically used in websites and other applications. These typically end up as individual files within the [output](/glossary#o) but can also be inlined via things like the [style-loader](/loaders/style-loader) or [url-loader](/loaders/url-loader).


## B

- [**Bundle**](/guides/get-started/#creating-a-bundle): Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process.
- [**Bundle Splitting**](/guides/code-splitting/#components/): This process offers one way of optimizing a build, allowing webpack to generate multiple bundles for a single application. As a result, each bundle can be isolated from changes effecting others, reducing the amount of code that needs to be republished and therefore re-downloaded by the client and taking advantage of browser caching.


## C

- [**Code Splitting**](/guides/code-splitting/): Refers to dividing your code into various bundles/chunks which you can then load on demand instead of loading a single bundle containing everything.
- **Chunk**: This webpack-specific term is used internally to manage the bundling process. Bundles are composed out of chunks, of which there are several types (e.g. entry and child).
- [**Configuration**](/concepts/configuration/): webpack config file is a plain old JavaScript file that exports an object. This object is then processed by webpack based upon its defined properties.


## D

- [**Dependency Graph**](/concepts/dependency-graph): Any time one file depends on another, webpack treats this as a *dependency*. Starting from an entry point(s), webpack recursively builds a dependency graph that includes every module/asset your application needs.


## E

- [**Entry Point**](/concepts/entry-points): The entry point tells webpack where to start and follows the graph of dependencies to know what to bundle. You can think of your application's entry point(s) as the **contextual root(s)** of what you want bundled.


## F

## G

## H

- [**Hot Module Replacement aka (HMR)**](/concepts/hot-module-replacement): A process that exchanges, adds, or removes `modules` while an application is running without a full page reload.


## I

## J

## K

## L

- [**Loaders**](/concepts/loaders): Transformations that are applied on the source code of a module. They allow you to pre-process files as you `require()` or "load" them. Similar to a 'task-runner'.

## M

- [**Module**](/concepts/modules): Discrete chunks of functionality that provide a smaller surface area than a full program. Well-written modules provide solid abstractions and encapsulation boundaries which make up a coherent design and clear purpose.
- [**Module Resolution**](/concepts/module-resolution/): A module can be required as a dependency from another module and a resolver is a library which helps in locating a module by its absolute path.. Modules are searched for inside all directories specified in `resolve.modules`.

## N

## O

- [**Output**](/concepts/output): Option(s) specifying where to the output of the compiled files to disk.
> _Note, that while there can be multiple entry points, only one output configuration is specified._


## P

- [**Plugin**](/concepts/plugins): A JavaScript object that has an `apply` property. This `apply` property is called by the webpack compiler, giving access to the entire compilation lifecycle. These packages will typically extend compilation functionality in one way or another.


## Q

## R

## S

## T

- [**Target**](/configuration/target/): User configured deployment target(s) [listed here](/configuration/target/) to compile for a specific environment like the browser, NodeJS, or Electron.
- [**Tree Shaking**](/guides/tree-shaking/): Unused/Excess code elimination, or more precisely, live code importing. Compilers like webpack will accomplish this by analyzing the various kinds `import` statements and usage of the imported code to determine what parts of dependencies are actually being utilized, dropping parts of the "tree" that are not.


## U

## V

- [**Vendor Entry Point**](/concepts/entry-points/#separate-app-and-vendor-entries): Create dependency graphs starting at both `app.js` and `vendors.js`. These graphs are completely separate and independent of each other to allow leverage of `CommonsChunkPlugin` and extract any vendor references from your app bundle into your vendor bundle. Helps achieve a common pattern in webpack known as [long-term vendor-caching](/guides/caching/).

## W

- [**webpack**](/): A highly configurable [module](/concepts/modules) bundler for modern JavaScript applications

## X

## Y

## Z

3 changes: 2 additions & 1 deletion content/guides/caching.md
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,8 @@ module.exports = {
new WebpackChunkHash(),
new ChunkManifestPlugin({
filename: "chunk-manifest.json",
manifestVariable: "webpackManifest"
manifestVariable: "webpackManifest",
inlineManifest: true
})
]
};
Expand Down
4 changes: 2 additions & 2 deletions content/guides/code-splitting-async.md
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ Note that the promise is [resolved with the module namespace](https://github.com
```js
// Example 1: top-level import
import * as Component from './component';
// Example 2: Code-splitting with import()
// Example 2: Code Splitting with import()
import('./component').then(Component => /* ... */);
```

Expand Down Expand Up @@ -276,7 +276,7 @@ When you add `bundle.js` in your HTML file and open it in your browser, the `0.b

### publicPath

`output.publicPath` is an important option when using code-splitting, it is used to tell webpack where to load your bundles on-demand, see the [configuration documentation](/configuration/output/#output-publicpath).
`output.publicPath` is an important option when using Code Splitting, it is used to tell webpack where to load your bundles on-demand, see the [configuration documentation](/configuration/output/#output-publicpath).


### Chunk name
Expand Down
12 changes: 8 additions & 4 deletions content/guides/code-splitting.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,28 @@ Code splitting is one of the most compelling features of webpack. It allows you

There are mainly two kinds of code splitting that can be accomplished with webpack:

## Resource splitting for caching and parallel loads

### Vendor code splitting
## Resource Splitting

Vendor and CSS code splitting methods help with both caching and parallel loading.

### Vendor Code Splitting

A typical application can depend on many third party libraries for framework/functionality needs. Unlike application code, code present in these libraries does not change often.

If we keep code from these libraries in its own bundle, separate from the application code, we can leverage the browser's caching mechanism to cache these files for longer durations on the end user's machine.

For this to work, the `[hash]` portion in the vendor filename must remain constant, regardless of application code changes. Learn [how to split vendor/library](/guides/code-splitting-libraries) code using the `CommonsChunkPlugin`.

### CSS splitting
### CSS Splitting

You might also want to split your styles into a separate bundle, independent from application logic.
This enhances cacheability of your styles and allows the browser to load the styles in-parallel with your application code, thus preventing a FOUC ([flash of unstyled content](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)).

Learn [how to split CSS](/guides/code-splitting-css) using the `ExtractTextWebpackPlugin`.

## On demand code-splitting

## On Demand Code Splitting

While resource splitting of the previous kind requires the user to specify the split points upfront in the configuration, one can also create dynamic split points in the application code.

Expand Down
2 changes: 1 addition & 1 deletion content/guides/production-build.md
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,7 @@ __webpack.prod.js__

```js
const Merge = require('webpack-merge');
const CommonConfig = require('./base.js');
const CommonConfig = require('./webpack.common.js');

module.exports = function(env) {
return Merge(CommonConfig, {
Expand Down
18 changes: 17 additions & 1 deletion content/plugins/banner-plugin.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,20 @@
title: BannerPlugin
contributors:
- simon04
related:
- title: banner-plugin-hashing test
url: https://github.com/webpack/webpack/blob/master/test/configCases/plugins/banner-plugin-hashing/webpack.config.js

---

Adds a banner to the top of each generated chunk.

``` javascript
new webpack.BannerPlugin(banner)
// or
new webpack.BannerPlugin(options)
```

Adds a banner to the top of each generated chunk.

## Options

Expand All @@ -24,3 +29,14 @@ Adds a banner to the top of each generated chunk.
exclude: string | RegExp | Array,
}
```


## Placeholders

Since webpack 2.5.0, placeholders are evaluated in the `banner` string:

```javascript
new webpack.BannerPlugin({
banner: "hash:[hash], chunkhash:[chunkhash], name:[name], filebase:[filebase], query:[query], file:[file]"
})
```
1 change: 1 addition & 0 deletions content/plugins/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ webpack has a rich plugin interface. Most of the features within webpack itself
|[`DllPlugin`](/plugins/dll-plugin)|Provide means to split bundles in a way that can drastically improve build time performance.|
|[`ExtractTextWebpackPlugin`](/plugins/extract-text-webpack-plugin)|Extracts Text (CSS) from your bundles into a separate file (app.bundle.css)|
|[`HtmlWebpackPlugin`](/plugins/html-webpack-plugin)| Simplifies creation of HTML files (`index.html`) to serve your bundles|
|[`IgnorePlugin`](/plugins/ignore-plugin)| Excludes certain modules from bundles|
|[`I18nWebpackPlugin`](/plugins/i18n-webpack-plugin)|Adds i18n support to your bundles|
|[`LimitChunkCountPlugin`](/plugins/limit-chunk-count-plugin)| Set min/max limits for chunking to fine tune and control chunking|
|[`NormalModuleReplacementPlugin`](/plugins/normal-module-replacement-plugin)|Replaces resource that matches a regexp|
Expand Down