SurviveJS - Webpack 5. From apprentice to master

301 Pages·2022·1.132 MB·English

by  J. Vepsalainen, T. Koppers, J. Rodriguez

SurviveJS - Webpack 5
From apprentice to master
Juho Vepsäläinen, Tobias Koppers and Jesús Rodríguez
Rodríguez
Thisbookisforsaleathttp://leanpub.com/survivejs-webpack
Thisversionwaspublishedon2022-10-26
ThisisaLeanpubbook.LeanpubempowersauthorsandpublisherswiththeLean
Publishingprocess.LeanPublishingistheactofpublishinganin-progressebook
usinglightweighttoolsandmanyiterationstogetreaderfeedback,pivotuntilyou
havetherightbookandbuildtractiononceyoudo.
ThisworkislicensedunderaCreativeCommons
Attribution-NonCommercial-NoDerivatives4.0InternationalLicense
Contents
Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . i
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ii
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii
Whatiswebpack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii
Howwebpackchangesthesituation . . . . . . . . . . . . . . . . . . . . . . . iv
Whatwillyoulearn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iv
Howisthebookorganized . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iv
Whoisthebookfor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vi
Whatarethebookconventions . . . . . . . . . . . . . . . . . . . . . . . . . . vi
Howisthebookversioned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii
Howtogetsupport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viii
Wheretofindadditionalmaterial . . . . . . . . . . . . . . . . . . . . . . . . . viii
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix
WhatisWebpack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . x
Webpackreliesonmodules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . x
Webpack’sexecutionprocess . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Webpackisconfigurationdriven . . . . . . . . . . . . . . . . . . . . . . . . . xiv
HotModuleReplacement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
Assethashing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
Codesplitting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvi
Webpack5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvi
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
CONTENTS
I Developing
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1. GettingStarted. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.1 Settinguptheproject. . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Installingwebpack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3 Runningwebpack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.4 Settingupassets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.5 Configuringmini-html-webpack-plugin . . . . . . . . . . . . . . . 6
1.6 Examiningtheoutput . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.7 Addingabuildshortcut . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.8 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2. DevelopmentServer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.1 Webpackwatchmode . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2 webpack-dev-server . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.3 webpack-plugin-serve . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.4 Accessingdevelopmentserverfromthenetwork . . . . . . . . . . . 15
2.5 Pollinginsteadofwatchingfiles . . . . . . . . . . . . . . . . . . . . . 15
2.6 Makingitfastertodevelopwebpackconfiguration . . . . . . . . . 16
2.7 Watchingfilesoutsideofwebpack’smodulegraph. . . . . . . . . . 17
2.8 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3. ComposingConfiguration . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.1 Possiblewaystomanageconfiguration . . . . . . . . . . . . . . . . . 18
3.2 Composingconfigurationbymerging . . . . . . . . . . . . . . . . . 19
3.3 Settingupwebpack-merge . . . . . . . . . . . . . . . . . . . . . . . . 20
3.4 Benefitsofcomposingconfiguration . . . . . . . . . . . . . . . . . . 22
3.5 Configurationlayouts . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.6 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
II Styling
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
4. LoadingStyles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
4.1 LoadingCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
4.2 SettingupinitialCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.3 PostCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
CONTENTS
4.4 UsingCSSpreprocessors . . . . . . . . . . . . . . . . . . . . . . . . . . 30
4.5 Understandingcss-loaderlookups . . . . . . . . . . . . . . . . . . . 30
4.6 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
5. SeparatingCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.1 SettingupMiniCssExtractPlugin . . . . . . . . . . . . . . . . . . . . 34
5.2 ManagingstylesoutsideofJavaScript. . . . . . . . . . . . . . . . . . 36
5.3 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
6. EliminatingUnusedCSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
6.1 SettingupTailwind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
6.2 EnablingPurgeCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
6.3 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
7. Autoprefixing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
7.1 Settingupautoprefixing . . . . . . . . . . . . . . . . . . . . . . . . . . 45
7.2 Definingabrowserslist . . . . . . . . . . . . . . . . . . . . . . . . . . 46
7.3 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
III Loading Assets
. . . . . . . . . . . . . . . . . . . . . . . . . 49
8. LoaderDefinitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
8.1 Anatomyofaloader . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
8.2 Loaderevaluationorder . . . . . . . . . . . . . . . . . . . . . . . . . . 51
8.3 Passingparameterstoaloader . . . . . . . . . . . . . . . . . . . . . . 52
8.4 Inlinedefinitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
8.5 Branchingatuseusingafunction . . . . . . . . . . . . . . . . . . . . 53
8.6 Loadingwithinfoobject . . . . . . . . . . . . . . . . . . . . . . . . . 54
8.7 LoadingbasedonresourceQuery . . . . . . . . . . . . . . . . . . . . 55
8.8 Loadingbasedonissuer . . . . . . . . . . . . . . . . . . . . . . . . . 55
8.9 Alternatewaystomatchfiles . . . . . . . . . . . . . . . . . . . . . . . 56
8.10 Understandingloaderbehavior. . . . . . . . . . . . . . . . . . . . . . 57
8.11 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
9. LoadingImages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
9.1 Integratingimagestotheproject . . . . . . . . . . . . . . . . . . . . . 59
9.2 Usingsrcsets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
CONTENTS
9.3 Optimizingimages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
9.4 LoadingSVGs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
9.5 Loadingimagesdynamically . . . . . . . . . . . . . . . . . . . . . . . 61
9.6 Loadingsprites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
9.7 Usingplaceholders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
9.8 Referencingtoimages . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
9.9 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
10. LoadingFonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
10.1 Settingupaloader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
10.2 Usingiconfonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
10.3 UsingGoogleFonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
10.4 Manipulatingfile-loaderoutputpathandpublicPath . . . . . . . 67
10.5 Eliminatingunusedcharacters . . . . . . . . . . . . . . . . . . . . . . 67
10.6 GeneratingfontfilesbasedonSVGs . . . . . . . . . . . . . . . . . . 68
10.7 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
11. LoadingJavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
11.1 UsingBabelwithwebpackconfiguration. . . . . . . . . . . . . . . . 70
11.2 Polyfillingfeatures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
11.3 Babeltips . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
11.4 Babelplugins. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
11.5 Generatingdifferentialbuilds. . . . . . . . . . . . . . . . . . . . . . . 76
11.6 TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
11.7 WebAssembly . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
11.8 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
IV Building
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
12. SourceMaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
12.1 Inlinesourcemapsandseparatesourcemaps . . . . . . . . . . . . . 83
12.2 Enablingsourcemaps . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
12.3 Sourcemaptypessupportedbywebpack. . . . . . . . . . . . . . . . 85
12.4 Inlinesourcemaptypes . . . . . . . . . . . . . . . . . . . . . . . . . . 85
12.5 Separatesourcemaptypes . . . . . . . . . . . . . . . . . . . . . . . . 88
12.6 Othersourcemapoptions . . . . . . . . . . . . . . . . . . . . . . . . . 91
CONTENTS
12.7 SourceMapDevToolPluginandEvalSourceMapDevToolPlugin. . . . 92
12.8 Changingsourcemapprefix . . . . . . . . . . . . . . . . . . . . . . . 92
12.9 Extractingsourcefromsourcemaps. . . . . . . . . . . . . . . . . . . 92
12.10 Sourcemapsonbackend . . . . . . . . . . . . . . . . . . . . . . . . . . 93
12.11 Ignoringsourcemaprelatedwarnings . . . . . . . . . . . . . . . . . 93
12.12 Usingdependencysourcemaps . . . . . . . . . . . . . . . . . . . . . 93
12.13 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
13. CodeSplitting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
13.1 Codesplittingformats . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
13.2 Controllingcodesplittingonruntime . . . . . . . . . . . . . . . . . . 99
13.3 CodesplittinginReact . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
13.4 Disablingcodesplitting . . . . . . . . . . . . . . . . . . . . . . . . . . 100
13.5 Machinelearningdrivenprefetching . . . . . . . . . . . . . . . . . . 100
13.6 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
14. BundleSplitting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
14.1 Addingsomethingtosplit . . . . . . . . . . . . . . . . . . . . . . . . . 102
14.2 Settingupavendorbundle . . . . . . . . . . . . . . . . . . . . . . . . 103
14.3 Controllingbundlesplitting . . . . . . . . . . . . . . . . . . . . . . . . 105
14.4 Splittingandmergingchunks. . . . . . . . . . . . . . . . . . . . . . . 106
14.5 Bundlesplittingatentryconfiguration . . . . . . . . . . . . . . . . . 108
14.6 Chunktypesinwebpack. . . . . . . . . . . . . . . . . . . . . . . . . . 108
14.7 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
15. TidyingUp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
15.1 Cleaningthebuilddirectory . . . . . . . . . . . . . . . . . . . . . . . 110
15.2 Attachingarevisiontothebuild . . . . . . . . . . . . . . . . . . . . . 111
15.3 Copyingfiles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
15.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
V Optimizing
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
16. Minifying . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
16.1 MinifyingJavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
16.2 SpeedingupJavaScriptexecution . . . . . . . . . . . . . . . . . . . . 117
CONTENTS
16.3 MinifyingHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
16.4 MinifyingCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
16.5 Compressingbundles . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
16.6 Obfuscatingoutput . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
16.7 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
17. TreeShaking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
17.1 Demonstratingtreeshaking . . . . . . . . . . . . . . . . . . . . . . . . 121
17.2 Treeshakingonpackagelevel . . . . . . . . . . . . . . . . . . . . . . 122
17.3 Treeshakingwithexternalpackages . . . . . . . . . . . . . . . . . . 123
17.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
18. EnvironmentVariables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
18.1 Thebasicideaof DefinePlugin . . . . . . . . . . . . . . . . . . . . . 125
18.2 Settingprocess.env.NODE_ENV . . . . . . . . . . . . . . . . . . . . . . 126
18.3 Choosingwhichmoduletouse . . . . . . . . . . . . . . . . . . . . . . 127
18.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
19. AddingHashestoFilenames . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
19.1 Placeholders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
19.2 Settinguphashing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
19.3 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
20. SeparatingaRuntime . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
20.1 Extractingaruntime . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
20.2 Usingrecords . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
20.3 Integratingwithassetpipelines . . . . . . . . . . . . . . . . . . . . . 137
20.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
21. BuildAnalysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
21.1 Configuringwebpack . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
21.2 Enablingaperformancebudget . . . . . . . . . . . . . . . . . . . . . 140
21.3 Dependencyanalysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
21.4 Compositionanalysis. . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
21.5 Outputplugins. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
21.6 Onlineservices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
21.7 Bundlecomparison . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
CONTENTS
21.8 Unusedfilesanalysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
21.9 Duplicationanalysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
21.10 Understandingwhyamodulewasbundled . . . . . . . . . . . . . . 146
21.11 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
22. Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
22.1 Measuringimpact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
22.2 High-leveloptimizations. . . . . . . . . . . . . . . . . . . . . . . . . . 148
22.3 Low-leveloptimizations . . . . . . . . . . . . . . . . . . . . . . . . . . 148
22.4 Optimizingrebundlingspeedduringdevelopment . . . . . . . . . . 149
22.5 Webpack4performancetricks . . . . . . . . . . . . . . . . . . . . . . 150
22.6 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
VI Output
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
23. BuildTargets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
23.1 Webtargets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
23.2 Nodetargets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
23.3 Desktoptargets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
23.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
24. MultiplePages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
24.1 Possibleapproaches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
24.2 Generatingmultiplepages. . . . . . . . . . . . . . . . . . . . . . . . . 157
24.3 Progressivewebapplications . . . . . . . . . . . . . . . . . . . . . . . 159
24.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
25. Server-SideRendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
25.1 SettingupBabelwithReact . . . . . . . . . . . . . . . . . . . . . . . . 161
25.2 SettingupaReactdemo . . . . . . . . . . . . . . . . . . . . . . . . . . 162
25.3 Configuringwebpack . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
25.4 Settingupaserver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
25.5 Openquestions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
25.6 Prerendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
25.7 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
26. ModuleFederation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
CONTENTS
26.1 Modulefederationexample . . . . . . . . . . . . . . . . . . . . . . . . 169
26.2 Addingwebpackconfiguration . . . . . . . . . . . . . . . . . . . . . . 170
26.3 ImplementingtheapplicationwithReact . . . . . . . . . . . . . . . 172
26.4 Separatingbootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
26.5 Separatingheader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
26.6 Prosandcons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
26.7 Learnmore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
26.8 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
VII Techniques
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
27. DynamicLoading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
27.1 Dynamicloadingwithrequire.context . . . . . . . . . . . . . . . . 182
27.2 Dynamicpathswithadynamicimport . . . . . . . . . . . . . . . . . 183
27.3 Combiningmultiplerequire.contexts . . . . . . . . . . . . . . . . . 184
27.4 Dealingwithdynamicpaths . . . . . . . . . . . . . . . . . . . . . . . 185
27.5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
28. WebWorkers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
28.1 Settingupaworker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
28.2 Settingupahost. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
28.3 Sharingdata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
28.4 Otheroptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
28.5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
29. Internationalization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
29.1 i18nwithwebpack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
29.2 Settinguptranslations . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
29.3 Settingupwebpack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
29.4 Settingupapplication . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
29.5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
30. Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
30.1 Jest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
30.2 Mocking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
30.3 Removingfilesfromtests . . . . . . . . . . . . . . . . . . . . . . . . . 195