Use Webpack 5 with Angular version 11
Monday, November 9, 2020
Use Webpack 5 with Angular version 11
The Angular command-line interface (CLI) uses webpack for bundling JavaScript, as well as the webpack dev server for local development.
Angular version 11 will still use webpack version 4, however, you can use webpack 5 using yarn's selective dependency resolutions feature, or installing the npm-force-resolutions pacakge. Selective dependency resolution enables developers to specificy custom package transitive dependency (in other words dependencies of dependencies) versions.
NPM
If you are using npm, you need to first install the npm-force-resolutions package:
npm i npm-force-resolutions
Then, you need to modify your package.json scripts to include a preinstall hook:
"scripts": {
"preinstall": "npx npm-force-resolutions"
},
Yarn or NPM
If you are using either Yarn or npm you can now update the transitive dependency resolution version using the resolutions
property in the package.json file:
{
"resolutions": {
"webpack": "^5.0.0"
},
}
Finally, install webpack version 5 via Yarn with yarn install
or with npm via npm install
.
Instructions
Consider using Webpack 5 with Angular version 11
Using the npm-force-resolutions package if you are reluctant to use yarn over npm
Webpack 5 supports module federation, better tree shaking, improved caching, and more.
Code Examples
Specify webpack version 5 resolution in package.json file
"resolutions": {
"webpack": "^5.0.0"
},
Have a question or comment?