chore: update Webpack to latest #18919

layershifter · 2021-07-13T14:55:56Z

Pull request checklist

~~Addresses an existing issue: Fixes #0000~~
~~Include a change request file using $ yarn change~~

Description of changes

This PR bumps Webpack to latest across monorepo, this is a blocker for #18918. Without this we will not have type-safety for Webpack's API.

References

latest release contains required typings for LoaderContext feat: add LoaderContext to types webpack/webpack#13164
similar change in ts-loader start consuming webpack loader types TypeStrong/ts-loader#1325

layershifter · 2021-07-13T14:56:26Z

packages/fluentui/digest/package.json

@@ -19,8 +19,7 @@
  },
  "dependencies": {
    "just-scripts": "1.3.1",
-    "querystring": "^0.2.0",
-    "webpack": "5.21.2"


This looks redundant as we have the same version on root...

It might be there because digest was intended to be published at some point? Though looks like it's not published now, so agreed it's not needed.

DustyTheBot · 2021-07-13T14:58:28Z

	Warnings
⚠️	There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Generated by 🚫 dangerJS against 154c569

size-auditor · 2021-07-13T15:07:15Z

Asset size changes

⚠️ Insufficient baseline data to detect size changes

Unable to find bundle size details for Baseline commit: a84e635

Possible causes

The baseline build a84e635 is broken
The Size Auditor run for the baseline build a84e635 was not triggered

Recommendations

Please merge your branch for this Pull request with the latest master build and commit your changes once again

codesandbox-ci · 2021-07-13T15:10:42Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 154c569:

Sandbox	Source
Fluent UI Button	Configuration
codesandbox-react-template	Configuration
codesandbox-react-northstar-template	Configuration

fabricteam · 2021-07-13T15:22:43Z

Perf Analysis (`@fluentui/react`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Panel	mount	1994	1308	1000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	743	779	5000
BaseButton	mount	890	832	5000
Breadcrumb	mount	2503	2492	1000
ButtonNext	mount	485	503	5000
Checkbox	mount	1453	1423	5000
CheckboxBase	mount	1222	1248	5000
ChoiceGroup	mount	4554	4477	5000
ComboBox	mount	926	934	1000
CommandBar	mount	9776	9659	1000
ContextualMenu	mount	5978	6002	1000
DefaultButton	mount	1087	1077	5000
DetailsRow	mount	3551	3528	5000
DetailsRowFast	mount	3500	3551	5000
DetailsRowNoStyles	mount	3355	3402	5000
Dialog	mount	2070	2060	1000
DocumentCardTitle	mount	137	141	1000
Dropdown	mount	3065	3123	5000
FluentProviderNext	mount	7014	7059	5000
FocusTrapZone	mount	1663	1722	5000
FocusZone	mount	1705	1694	5000
IconButton	mount	1666	1668	5000
Label	mount	325	323	5000
Layer	mount	1710	1684	5000
Link	mount	441	431	5000
MakeStyles	mount	1746	1758	50000
MenuButton	mount	1412	1369	5000
MessageBar	mount	1931	1957	5000
Nav	mount	3177	3157	1000
OverflowSet	mount	976	988	5000
Panel	mount	1994	1308	1000	Possible regression
Persona	mount	788	789	1000
Pivot	mount	1323	1363	1000
PrimaryButton	mount	1197	1256	5000
Rating	mount	7316	7346	5000
SearchBox	mount	1263	1231	5000
Shimmer	mount	2425	2366	5000
Slider	mount	1876	1900	5000
SpinButton	mount	4783	4808	5000
Spinner	mount	395	413	5000
SplitButton	mount	3036	2986	5000
Stack	mount	466	467	5000
StackWithIntrinsicChildren	mount	1422	1463	5000
StackWithTextChildren	mount	4288	4311	5000
SwatchColorPicker	mount	9772	9740	5000
Tabs	mount	1355	1343	1000
TagPicker	mount	2277	2322	5000
TeachingBubble	mount	11523	11394	5000
Text	mount	402	412	5000
TextField	mount	1314	1375	5000
ThemeProvider	mount	1143	1144	5000
ThemeProvider	virtual-rerender	574	574	5000
Toggle	mount	766	783	5000
buttonNative	mount	110	120	5000

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AvatarMinimalPerf.default	190	175	1.09:1
ButtonSlotsPerf.default	542	509	1.06:1
VideoMinimalPerf.default	620	587	1.06:1
ListCommonPerf.default	599	573	1.05:1
GridMinimalPerf.default	331	317	1.04:1
AttachmentMinimalPerf.default	148	143	1.03:1
ChatMinimalPerf.default	624	606	1.03:1
DropdownManyItemsPerf.default	652	635	1.03:1
FormMinimalPerf.default	385	375	1.03:1
ListWith60ListItems.default	616	599	1.03:1
TableManyItemsPerf.default	1868	1805	1.03:1
LoaderMinimalPerf.default	660	645	1.02:1
ReactionMinimalPerf.default	351	343	1.02:1
SegmentMinimalPerf.default	348	340	1.02:1
StatusMinimalPerf.default	656	645	1.02:1
IconMinimalPerf.default	605	591	1.02:1
TableMinimalPerf.default	383	375	1.02:1
TooltipMinimalPerf.default	961	940	1.02:1
TreeWith60ListItems.default	164	160	1.02:1
AnimationMinimalPerf.default	382	380	1.01:1
AttachmentSlotsPerf.default	1020	1013	1.01:1
ButtonMinimalPerf.default	164	163	1.01:1
CarouselMinimalPerf.default	442	439	1.01:1
DropdownMinimalPerf.default	3011	2996	1.01:1
FlexMinimalPerf.default	261	259	1.01:1
ItemLayoutMinimalPerf.default	1154	1138	1.01:1
LabelMinimalPerf.default	366	363	1.01:1
ListNestedPerf.default	524	520	1.01:1
MenuButtonMinimalPerf.default	1572	1560	1.01:1
PopupMinimalPerf.default	574	569	1.01:1
SliderMinimalPerf.default	1507	1492	1.01:1
ButtonOverridesMissPerf.default	1614	1613	1:1
CardMinimalPerf.default	509	511	1:1
ChatWithPopoverPerf.default	342	341	1:1
HeaderMinimalPerf.default	348	349	1:1
HeaderSlotsPerf.default	719	722	1:1
SkeletonMinimalPerf.default	339	338	1:1
TextMinimalPerf.default	325	324	1:1
CustomToolbarPrototype.default	3661	3679	1:1
ToolbarMinimalPerf.default	890	893	1:1
CheckboxMinimalPerf.default	2653	2672	0.99:1
DatepickerMinimalPerf.default	5165	5216	0.99:1
EmbedMinimalPerf.default	3935	3959	0.99:1
InputMinimalPerf.default	1197	1209	0.99:1
MenuMinimalPerf.default	810	816	0.99:1
ProviderMinimalPerf.default	935	944	0.99:1
RefMinimalPerf.default	225	227	0.99:1
SplitButtonMinimalPerf.default	3628	3650	0.99:1
TreeMinimalPerf.default	744	751	0.99:1
DialogMinimalPerf.default	712	725	0.98:1
ProviderMergeThemesPerf.default	1597	1630	0.98:1
AccordionMinimalPerf.default	138	142	0.97:1
DividerMinimalPerf.default	333	344	0.97:1
ListMinimalPerf.default	476	492	0.97:1
PortalMinimalPerf.default	165	170	0.97:1
ImageMinimalPerf.default	347	361	0.96:1
LayoutMinimalPerf.default	340	355	0.96:1
RadioGroupMinimalPerf.default	418	437	0.96:1
TextAreaMinimalPerf.default	469	488	0.96:1
ChatDuplicateMessagesPerf.default	267	280	0.95:1
AlertMinimalPerf.default	241	257	0.94:1
RosterPerf.default	1098	1174	0.94:1
BoxMinimalPerf.default	306	330	0.93:1

layershifter · 2021-07-13T15:28:02Z

scripts/webpack/webpack.config.e2e.ts

@@ -40,7 +40,7 @@ const webpackConfig: webpack.Configuration = {
    ],
  },
  plugins: [
-    new webpack.DefinePlugin(getDefaultEnvironmentVars()),
+    new webpack.DefinePlugin(getDefaultEnvironmentVars(true)),


As we run this build only in production this override is required, otherwise it's causing:

verb @fluentui/e2e test | WARNING in DefinePlugin verb @fluentui/e2e test | Conflicting values for 'process.env.NODE_ENV' verb @fluentui/e2e test | '"development"' !== '"production"' verb @fluentui/e2e test |

ecraig12345 · 2021-07-13T17:22:40Z

yarn.lock

@@ -25259,6 +25295,18 @@ terser-webpack-plugin@^3.0.0:
    terser "^4.8.0"
    webpack-sources "^1.4.3"

+terser-webpack-plugin@^5.1.3:


Looks like you need to update our specified version of terser-webpack-plugin at the root to 5.1.3 as well.

I deduped terser, terser-webpack-plugin, acorn & enhanced-resolve 👍

ecraig12345 · 2021-07-13T17:23:07Z

yarn.lock

@@ -25277,6 +25325,15 @@ terser@^4.1.2, terser@^4.3.9, terser@^4.6.12, terser@^4.6.2, terser@^4.6.3, ters
    source-map "~0.6.1"
    source-map-support "~0.5.12"

+terser@^5.7.0:


Similar, you should update our version of terser to 5.7.1

ecraig12345

LGTM once terser and terser-webpack-plugin duplicate issues are addressed. (Kind of surprised the upgrade appears to be so easy this time!)

One more thing to check: about 2 hours after this is merged and published (CDN cache expiration), please take a look at https://developer.microsoft.com/en-us/fluentui and verify it's still rendering properly. We've occasionally seen webpack issues only show up on the production version of the website.

layershifter · 2021-07-13T19:52:10Z

LGTM once terser and terser-webpack-plugin duplicate issues are addressed. (Kind of surprised the upgrade appears to be so easy this time!)

I would expect it, it's a minor bump 😅

ecraig12345 · 2021-07-13T20:57:21Z

LGTM once terser and terser-webpack-plugin duplicate issues are addressed. (Kind of surprised the upgrade appears to be so easy this time!)

I would expect it, it's a minor bump 😅

I've seen even minor bumps of webpack be rather nightmarish sometimes. Or sometimes they seem to be fine and then cause extremely hard-to-debug issues in production builds only...hence the request to check the website. 😬

layershifter · 2021-07-14T13:22:00Z

@ecraig12345 website still loads 😅

ecraig12345 · 2021-07-14T16:53:03Z

@layershifter Great, thanks for checking! :)

* chore: update Webpack to latest * tweak env variable * dedupe terser, terser-webpack-plugin, acorn & enhanced-resolve

chore: update Webpack to latest

d5e931b

layershifter requested review from jurokapsiar, ling1726, miroslavstastny, pompomon and a team as code owners July 13, 2021 14:55

msft-fluent-ui-bot assigned ling1726 Jul 13, 2021

layershifter commented Jul 13, 2021

View reviewed changes

layershifter added the Area: Build System label Jul 13, 2021

layershifter added this to In progress in V-Build - @microsoft/fluentui-react-build via automation Jul 13, 2021

tweak env variable

bcce163

layershifter commented Jul 13, 2021

View reviewed changes

ecraig12345 reviewed Jul 13, 2021

View reviewed changes

ecraig12345 approved these changes Jul 13, 2021

View reviewed changes

dedupe terser, terser-webpack-plugin, acorn & enhanced-resolve

154c569

ling1726 approved these changes Jul 14, 2021

View reviewed changes

V-Build - @microsoft/fluentui-react-build automation moved this from In progress to Reviewer approved Jul 14, 2021

layershifter merged commit 96ee2ca into master Jul 14, 2021

V-Build - @microsoft/fluentui-react-build automation moved this from Reviewer approved to Done Jul 14, 2021

layershifter deleted the chore/update-webpack branch July 14, 2021 10:05

Hotell added this to the July Project Cycle Q2 2021 milestone Jul 14, 2021

layershifter mentioned this pull request Jul 14, 2021

makeStyles: implement Webpack loader #18936

Closed

9 tasks

Hotell moved this from Done to Archive in V-Build - @microsoft/fluentui-react-build Aug 4, 2021

PeterDraex pushed a commit to PeterDraex/fluentui that referenced this pull request Aug 6, 2021

chore: update Webpack to latest (microsoft#18919)

1e1cf7c

* chore: update Webpack to latest * tweak env variable * dedupe terser, terser-webpack-plugin, acorn & enhanced-resolve

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: update Webpack to latest #18919

chore: update Webpack to latest #18919

layershifter commented Jul 13, 2021

layershifter Jul 13, 2021

ecraig12345 Jul 13, 2021

DustyTheBot commented Jul 13, 2021 •

edited

size-auditor bot commented Jul 13, 2021 •

edited

codesandbox-ci bot commented Jul 13, 2021 •

edited

fabricteam commented Jul 13, 2021 •

edited

layershifter Jul 13, 2021

ecraig12345 Jul 13, 2021

layershifter Jul 13, 2021

ecraig12345 Jul 13, 2021

ecraig12345 left a comment

layershifter commented Jul 13, 2021

ecraig12345 commented Jul 13, 2021

layershifter commented Jul 14, 2021

ecraig12345 commented Jul 14, 2021

chore: update Webpack to latest #18919

chore: update Webpack to latest #18919

Conversation

layershifter commented Jul 13, 2021

Pull request checklist

Description of changes

References

layershifter Jul 13, 2021

Choose a reason for hiding this comment

ecraig12345 Jul 13, 2021

Choose a reason for hiding this comment

DustyTheBot commented Jul 13, 2021 • edited

size-auditor bot commented Jul 13, 2021 • edited

Asset size changes

codesandbox-ci bot commented Jul 13, 2021 • edited

fabricteam commented Jul 13, 2021 • edited

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

layershifter Jul 13, 2021

Choose a reason for hiding this comment

ecraig12345 Jul 13, 2021

Choose a reason for hiding this comment

layershifter Jul 13, 2021

Choose a reason for hiding this comment

ecraig12345 Jul 13, 2021

Choose a reason for hiding this comment

ecraig12345 left a comment

Choose a reason for hiding this comment

layershifter commented Jul 13, 2021

ecraig12345 commented Jul 13, 2021

layershifter commented Jul 14, 2021

ecraig12345 commented Jul 14, 2021

DustyTheBot commented Jul 13, 2021 •

edited

size-auditor bot commented Jul 13, 2021 •

edited

codesandbox-ci bot commented Jul 13, 2021 •

edited

fabricteam commented Jul 13, 2021 •

edited

Perf Analysis (`@fluentui/react`)

Perf Analysis (`@fluentui/react-northstar`)