fix(web): fix styles vendorChunk in webpack 5 #6822
Conversation
ISSUES CLOSED: #6819
This is a bit less verbose than the previous version.
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/nrwl/nx-dev/CC7LfhYXgCGkRJ3X9A8UMKVcpBq5 |
Nx Cloud ReportCI is running for commit e08b534. 📂 Click to track the progress, see the status, the terminal output, and the build insights. Sent with 💌 from NxCloud. |
| @@ -5,6 +5,8 @@ | |||
| * Use of this source code is governed by an MIT-style license that can be | |||
| * found in the LICENSE file at https://angular.io/license | |||
| */ | |||
| // TODO: import from 'webpack' in Nx 13 | |||
| import type { Module, ModuleGraph, ChunkGraph, Chunk } from 'webpack-5'; | |||
There was a problem hiding this comment.
I did not want to introduce problems by changing to webpack@5, so I am adding this alias as
yarn add -D 'webpack-5@npm:webpack@^5.51.1'
There was a problem hiding this comment.
I think this would cause a problem if the user does not want webpack 5 installed. For now I think it's better to leave things untyped until Nx 13 when we remove webpack 4.
| const moduleName = module.nameForCondition | ||
| ? module.nameForCondition() | ||
| : ''; | ||
| test: ( |
There was a problem hiding this comment.
The test logic is the same, the only difference for isWebpack5 is the chunks condition. If preferred, we can revert the commit 283fcc2 to have separate function for isWebpack5.
| : ''; | ||
| // TODO(jack): Remove in Nx 13 | ||
| const chunks = isWebpack5 | ||
| ? context.chunkGraph.getModuleChunks(module) |
There was a problem hiding this comment.
I was going for the same condition as the webpack 4.
I'm not very familiar with the webpack API, so I am not sure if there is a better way to achieve this. I found that there's the chunksFilter config option, but it's called only with the chunk value, so I'm not sure if it would work.
| @@ -5,6 +5,8 @@ | |||
| * Use of this source code is governed by an MIT-style license that can be | |||
| * found in the LICENSE file at https://angular.io/license | |||
| */ | |||
| // TODO: import from 'webpack' in Nx 13 | |||
| import type { Module, ModuleGraph, ChunkGraph, Chunk } from 'webpack-5'; | |||
There was a problem hiding this comment.
I think this would cause a problem if the user does not want webpack 5 installed. For now I think it's better to leave things untyped until Nx 13 when we remove webpack 4.
|
Closing in favor of #6925 I realized what the problem was. There should never have been a split chunks config for the main styles entry chunk. My merged PR fixes this and the minification issues. :) |
|
This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request. |
Current Behavior
The styles bundle is not included in the
dist/.../index.htmlwhen using Webpack 5.Expected Behavior
All of the files listed in
build.stylesare bundled and included in thedist/.../index.htmlfile.Related Issue(s)
Fixes #6819