├── .github └── FUNDING.yml ├── LICENSE ├── guides ├── module-federation.md └── persistent-caching.md ├── MIGRATION GUIDE.md └── README.md /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: sokra 4 | open_collective: webpack 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 webpack 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /guides/module-federation.md: -------------------------------------------------------------------------------- 1 | # Module Federation 2 | 3 | ## Motivation 4 | 5 | Multiple separate builds should form a single application. 6 | These separate builds should not have build dependencies between each other, 7 | so they can be developed and deployed individually. 8 | 9 | This is often known as Micro-Frontends, but is not limited to that. 10 | 11 | ## Low-level concepts 12 | 13 | We distinguish between local and remote modules. 14 | Local modules are normal modules which are part of the current build. 15 | Remote modules are modules that are not part of the current build and loaded from a so called container at runtime. 16 | 17 | Loading remote modules is considered as async operation. 18 | When using a remote module these async operation will be placed in the next chunk loading operation(s) 19 | that is between the remote module and the entrypoint. 20 | It's not possible to use a remote module without a chunk loading operation. 21 | 22 | A chunk loading operation is usually an `import()`, but older constructs like `require.ensure` or `require([...])` are possible as well. 23 | 24 | A container is created through a container entry, which exposes async access to specified modules. 25 | The exposed access is separated into two steps: 1. loading the module (async) and 2. evaluating the module (sync). 26 | 27 | Step 1 will done during chunk loading. Step 2 will be done during module evaluation interleaved with other (local and remote) modules. 28 | This way evaluation order is unaffected by converting a module from local to remote or the other way around. 29 | 30 | Nesting container is possible. 31 | Containers can use modules from other containers. 32 | Circular dependencies between container are also possible. 33 | 34 | ### Overriding 35 | 36 | A container is able to flag selected local modules as "overridable". 37 | A consumer of the container is able to provide "overrides", which are modules that replace one of the overridable module of the container. 38 | All modules of the container will use the replacement module instead of the local module when the consumer provides one. 39 | When the consumer doesn't provide a replacement module, all modules of the container will use the local one. 40 | 41 | The container will organize overridable modules in a way that they do not need to be downloaded when they has been overriding by the consumer. 42 | This usually happens by placing them into separate chunks. 43 | 44 | One the other hand the provider of the replacement modules will only provide async loading functions which allow the container to load replacement modules only when they are needed. 45 | The provider will organize replacement modules in a way that they do not need to be downloaded when they are not requested by the container at all. 46 | This usually happens by placing them into separate chunks. 47 | 48 | A "name" is used to identify overridable modules from the container. 49 | 50 | Overrides are provided in a similar way as the container exposes modules, separated into two steps: 1. Loading (async) and 2. evaluating (sync). 51 | 52 | In nested scenarios, where a container uses other containers to load modules from, is overriding a transitive operation. 53 | Providing overrides to one container will also override these modules in nested container. 54 | This means that using a container will automatically make all "names" of the overridable modules, part of the overriding interface of the parent container. 55 | 56 | Overrides must be provided before modules of the container are loaded, otherwise behavior is undefined. 57 | 58 | ## High-level concepts 59 | 60 | Each build act as container and also consumes other build as containers. 61 | This way each build is able to access any other exposed module by loading it from its container. 62 | 63 | Shared modules are modules that are both, overridable and provided as overrides to nested container. 64 | They usually point to the same module in each build, e. g. the same library. 65 | 66 | ## Building blocks 67 | 68 | ### `OverridablesPlugin` (low level) 69 | 70 | This plugin makes specified modules "overridable". 71 | A local API (`__webpack_override__`) allows to provide overrides. 72 | 73 | ### `ContainerPlugin` (low level) 74 | 75 | This plugins creates an additional container entry with the specified exposed modules. 76 | It also uses the `OverridablesPlugin` internally and exposes the `override` API to consumer of the container. 77 | 78 | ### `ContainerReferencePlugin` (low level) 79 | 80 | This plugins adds specified references to containers as externals and allows to import remote modules from these containers. 81 | It also calls the `override` API of these containers to provide overrides to them. 82 | Local overrides (via `__webpack_override__` or `override` API when build is also a container) plus specified overrides are provided to all referenced containers. 83 | 84 | ### `ModuleFederationPlugin` (high level) 85 | 86 | This plugins combines `ContainerPlugin` and `ContainerReferencePlugin`. 87 | Overrides and overridables are combined into a single list of specified shared modules. 88 | 89 | ## Concept goals 90 | 91 | * Any module type supported by webpack should be possible to expose and use. 92 | * Chunk loading should load everything needed in parallel. (Web: single round-trip to server) 93 | * Control from consumer to container 94 | * Overriding modules is a one-directional operation 95 | * Sibling containers cannot override each others modules 96 | * Concept should be environment-independent 97 | * Usable in web, node.js, etc. 98 | 99 | ## Use cases 100 | 101 | ### Separate builds per page 102 | 103 | Each page of an SPA is exposed from container build in a separate build. 104 | The application shell is also a separate build referencing all pages as remove modules. 105 | This way each page can be separately deployed. 106 | The application shell is deployed when routes are updated or new routes are added. 107 | The application shell defines commonly used libraries as shared modules to avoid duplication of them in the page builds 108 | 109 | ### Components library as container 110 | 111 | Many applications that share a common components library. 112 | This component library is build as container with each component exposed. 113 | Each application consumes components from the component library container. 114 | Changes to the component library can be separately deployed without the need to re-deploy all applications. 115 | The application automatically use the up-to-date version of the component library. 116 | -------------------------------------------------------------------------------- /MIGRATION GUIDE.md: -------------------------------------------------------------------------------- 1 | [Help by editing this file](https://github.com/webpack/changelog-v5/edit/master/MIGRATION%20GUIDE.md). 2 | 3 | This guide should help you migrating to webpack 5 when **using webpack directly**. If you are using some higher-level tool to run webpack, please refer to the guide on migrating to webpack 5 for the tool you are using. 4 | 5 | # Preparations 6 | 7 | ## Upgrade your Node.js version 8 | 9 | webpack requires at least 10.13.0, but using Node.js 12 or 14 is recommended. 10 | 11 | Newer Node.js version will improve build performance a lot. 12 | 13 | ## Upgrade to latest webpack 4 version 14 | 15 | When using webpack < 4 consult the webpack 4 migration guide. 16 | 17 | When using webpack >= 4, this should be possible without problems. 18 | 19 | ## Upgrade to latest webpack-cli version (when used) 20 | 21 | ## Upgrade all plugins and loaders to the latest version 22 | 23 | Some plugins have a beta version that needs to be used for webpack 5 compatibility. Use them. 24 | 25 | Check migration guide when upgrading plugins across the major version. 26 | 27 | ## Make sure your build has no errors or warnings 28 | 29 | There might be new errors or warnings because of the upgraded versions of webpack, cli, plugins and loaders. 30 | 31 | ## Check for deprecation warnings during build 32 | 33 | You can invoke webpack this way 34 | 35 | ``` sh 36 | node --trace-deprecation node_modules/webpack/bin/webpack.js ... 37 | ``` 38 | 39 | to get stack traces for deprecation warnings to figure out which plugins are responsible. 40 | 41 | webpack 5 removes all deprecated features. You must have no webpack deprecation warning to be able to upgrade. 42 | 43 | ## Make sure you are using entrypoint information from stats 44 | 45 | When using html-webpack-plugin you are fine. 46 | 47 | When using static html or creating HTML in some other way, make sure you use `entrypoints` from stats json to generate `