diff --git a/content/api/module-methods.md b/content/api/module-methods.md index fc7b1b5b2fc5..faae3ed6fea6 100644 --- a/content/api/module-methods.md +++ b/content/api/module-methods.md @@ -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) diff --git a/content/configuration/dev-server.md b/content/configuration/dev-server.md index 53ffed6b54fb..6636c5886355 100644 --- a/content/configuration/dev-server.md +++ b/content/configuration/dev-server.md @@ -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` @@ -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: { diff --git a/content/glossary.md b/content/glossary.md new file mode 100644 index 000000000000..4cec847e2b20 --- /dev/null +++ b/content/glossary.md @@ -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 + diff --git a/content/guides/caching.md b/content/guides/caching.md index 3dec7a11ac2a..08997b5ffc40 100644 --- a/content/guides/caching.md +++ b/content/guides/caching.md @@ -233,7 +233,8 @@ module.exports = { new WebpackChunkHash(), new ChunkManifestPlugin({ filename: "chunk-manifest.json", - manifestVariable: "webpackManifest" + manifestVariable: "webpackManifest", + inlineManifest: true }) ] }; diff --git a/content/guides/code-splitting-async.md b/content/guides/code-splitting-async.md index d3b24d08fabb..1b69fd4534d5 100644 --- a/content/guides/code-splitting-async.md +++ b/content/guides/code-splitting-async.md @@ -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 => /* ... */); ``` @@ -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 diff --git a/content/guides/code-splitting.md b/content/guides/code-splitting.md index 909f10a8717e..ea0d4dfdd781 100644 --- a/content/guides/code-splitting.md +++ b/content/guides/code-splitting.md @@ -11,9 +11,12 @@ 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. @@ -21,14 +24,15 @@ If we keep code from these libraries in its own bundle, separate from the applic 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. diff --git a/content/guides/production-build.md b/content/guides/production-build.md index d0046e99c4c8..41fdf3ca17d4 100644 --- a/content/guides/production-build.md +++ b/content/guides/production-build.md @@ -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, { diff --git a/content/plugins/banner-plugin.md b/content/plugins/banner-plugin.md index e88de1b8896f..ee3f79262967 100644 --- a/content/plugins/banner-plugin.md +++ b/content/plugins/banner-plugin.md @@ -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 @@ -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]" +}) +``` diff --git a/content/plugins/index.md b/content/plugins/index.md index 041b3c1d703c..1f8bea9542e1 100644 --- a/content/plugins/index.md +++ b/content/plugins/index.md @@ -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|