Upgrade tooling to use Webpack 5 #20466
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
alan-agius4
reviewed
Apr 8, 2021
alan-agius4
reviewed
Apr 8, 2021
This was
linked to
issues
Apr 8, 2021
alan-agius4
reviewed
Apr 8, 2021
alan-agius4
reviewed
Apr 8, 2021
alan-agius4
approved these changes
Apr 8, 2021
There was a problem hiding this comment.
Good job!
Couple of points that should probably be addressed in a seperate PR.
- clean up left over
withWebpackFourOrFiveandisWebpackFiveOrHighercalls especially in build-angular. - should peer dependency on webpack 4 be dropped though-out?
- will a migration for the web-worker syntax change be done?
- update all 3P webpack plugins and loaders, since some of them are outdated due to the lack of support for Webpack 4.
|
Once this is in, there are a variety of refactoring and cleanup opportunities throughout the codebase by leveraging new Webpack 5 capabilities. I tried to keep this PR close to a minimal set of changes to enable Webpack 5 to reduce the effort in getting it reviewed and merged. |
Yeah, that was a good plan! |
The `@angular-devkit/build-webpack` package now officially supports Webpack 5. Webpack 4 support is temporarily maintained while the remainder of the tooling is transitioned.
…the build system
With this change Webpack 5 is now used by the Angular tooling to build applications. Webpack 4 usage and support has been removed.
No project level configuration changes are required to take advantage of the upgraded Webpack version when using the official Angular builders.
Custom builders based on this package that use the experimental programmatic APIs may need to be updated to become compatible with Webpack 5.
BREAKING CHANGE: Webpack 5 lazy loaded file name changes
Webpack 5 generates similar but differently named files for lazy loaded JavaScript files in development configurations (when the `namedChunks` option is enabled).
For the majority of users this change should have no effect on the application and/or build process. Production builds should also not be affected as the `namedChunks` option is disabled by default in production configurations.
However, if a project's post-build process makes assumptions as to the file names then adjustments may need to be made to account for the new naming paradigm.
Such post-build processes could include custom file transformations after the build, integration into service-side frameworks, or deployment procedures.
Example development file name change: `lazy-lazy-module.js` --> `src_app_lazy_lazy_module_ts.js`
BREAKING CHANGE: Webpack 5 web worker support
Webpack 5 now includes web worker support. However, the structure of the URL within the `Worker` constructor must be in a specific format that differs from the current requirement.
Web worker usage should be updated as shown below (where `./app.worker` should be replaced with the actual worker name):
Before: `new Worker('./app.worker', ...)`
After: `new Worker(new URL('./app.worker', import.meta.url), ...)`
…ndle stats for Webpack 5 Newer Webpack 5 APIs allow the bundle stat generation for analytics to be optimized including less iteration of chunks and assets.
The direct Webpack test for the Webpack plugin is now updated to use Webpack 5 as Webpack 5 is now the default for the Angular tooling.
…tion This change allows multiple instances of the `AngularWebpackPlugin` to be present in a Webpack configuration. Each plugin instance should reference a different TypeScript configuration file (`tsconfig.json`) and the TypeScript configuration files should be setup to not include source files present in the other TypeScript configuration files. If files are included in more than one TypeScript configuration, the first plugin present in the Webpack configuration that can emit the file will be used. Closes: angular#5072
Webpack 5 now includes web worker support. However, the structure of the URL within the `Worker` constructor must be in a specific format.
Before: `new Worker('./app.worker', ...)`
After: `new Worker(new URL('./app.worker', import.meta.url), ...)`
| @@ -133,7 +133,7 @@ export class OptimizeCssWebpackPlugin { | |||
| map, | |||
| ); | |||
| } else { | |||
| newSource = new RawSource(output.css); | |||
| newSource = new sources.RawSource(output.css); | |||
| } | |||
|
|
|||
| compilation.assets[file] = newSource; | |||
There was a problem hiding this comment.
Just note, we have https://github.com/webpack-contrib/css-minimizer-webpack-plugin - cache and multi threading included
There was a problem hiding this comment.
Thanks for sharing, will take a look
Closed
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
With this change Webpack 5 is now used by the Angular tooling to build applications. Webpack 4 usage and support has been removed.
No project level configuration changes are required to take advantage of the upgraded Webpack version when using the official Angular builders.
Custom builders based on this package that use the experimental programmatic APIs may need to be updated to become compatible with Webpack 5.
BREAKING CHANGE: Webpack 5 lazy loaded file name changes
Webpack 5 generates similar but differently named files for lazy loaded JavaScript files in development configurations (when the
namedChunksoption is enabled).For the majority of users this change should have no effect on the application and/or build process. Production builds should also not be affected as the
namedChunksoption is disabled by default in production configurations.However, if a project's post-build process makes assumptions as to the file names then adjustments may need to be made to account for the new naming paradigm.
Such post-build processes could include custom file transformations after the build, integration into service-side frameworks, or deployment procedures.
Example development file name change:
lazy-lazy-module.js-->src_app_lazy_lazy_module_ts.jsBREAKING CHANGE: Webpack 5 web worker support
Webpack 5 now includes web worker support. However, the structure of the URL within the
Workerconstructor must be in a specific format that differs from the current requirement.Web worker usage should be updated as shown below (where
./app.workershould be replaced with the actual worker name):Before:
new Worker('./app.worker', ...)After:
new Worker(new URL('./app.worker', import.meta.url), ...)