SurviveJS - Webpack 5. From apprentice to master

Table of Contents
Foreword
Preface
Introduction
	What is webpack
	How webpack changes the situation
	What will you learn
	How is the book organized
	Who is the book for
	What are the book conventions
	How is the book versioned
	How to get support
	Where to find additional material
	Acknowledgments
What is Webpack
	Webpack relies on modules
	Webpack's execution process
	Webpack is configuration driven
	Hot Module Replacement
	Asset hashing
	Code splitting
	Webpack 5
	Conclusion
I Developing
	Getting Started
		Setting up the project
		Installing webpack
		Running webpack
		Setting up assets
		Configuring mini-html-webpack-plugin
		Examining the output
		Adding a build shortcut
		Conclusion
	Development Server
		Webpack watch mode
		webpack-dev-server
		webpack-plugin-serve
		Accessing development server from the network
		Polling instead of watching files
		Making it faster to develop webpack configuration
		Watching files outside of webpack's module graph
		Conclusion
	Composing Configuration
		Possible ways to manage configuration
		Composing configuration by merging
		Setting up webpack-merge
		Benefits of composing configuration
		Configuration layouts
		Conclusion
II Styling
	Loading Styles
		Loading CSS
		Setting up initial CSS
		PostCSS
		Using CSS preprocessors
		Understanding css-loader lookups
		Conclusion
	Separating CSS
		Setting up MiniCssExtractPlugin
		Managing styles outside of JavaScript
		Conclusion
	Eliminating Unused CSS
		Setting up Tailwind
		Enabling PurgeCSS
		Conclusion
	Autoprefixing
		Setting up autoprefixing
		Defining a browserslist
		Conclusion
III Loading Assets
	Loader Definitions
		Anatomy of a loader
		Loader evaluation order
		Passing parameters to a loader
		Inline definitions
		Branching at use using a function
		Loading with info object
		Loading based on resourceQuery
		Loading based on issuer
		Alternate ways to match files
		Understanding loader behavior
		Conclusion
	Loading Images
		Integrating images to the project
		Using srcsets
		Optimizing images
		Loading SVGs
		Loading images dynamically
		Loading sprites
		Using placeholders
		Referencing to images
		Conclusion
	Loading Fonts
		Setting up a loader
		Using icon fonts
		Using Google Fonts
		Manipulating file-loader output path and publicPath
		Eliminating unused characters
		Generating font files based on SVGs
		Conclusion
	Loading JavaScript
		Using Babel with webpack configuration
		Polyfilling features
		Babel tips
		Babel plugins
		Generating differential builds
		TypeScript
		WebAssembly
		Conclusion
IV Building
	Source Maps
		Inline source maps and separate source maps
		Enabling source maps
		Source map types supported by webpack
		Inline source map types
		Separate source map types
		Other source map options
		SourceMapDevToolPlugin and EvalSourceMapDevToolPlugin
		Changing source map prefix
		Extracting source from source maps
		Source maps on backend
		Ignoring source map related warnings
		Using dependency source maps
		Conclusion
	Code Splitting
		Code splitting formats
		Controlling code splitting on runtime
		Code splitting in React
		Disabling code splitting
		Machine learning driven prefetching
		Conclusion
	Bundle Splitting
		Adding something to split
		Setting up a vendor bundle
		Controlling bundle splitting
		Splitting and merging chunks
		Bundle splitting at entry configuration
		Chunk types in webpack
		Conclusion
	Tidying Up
		Cleaning the build directory
		Attaching a revision to the build
		Copying files
		Conclusion
V Optimizing
	Minifying
		Minifying JavaScript
		Speeding up JavaScript execution
		Minifying HTML
		Minifying CSS
		Compressing bundles
		Obfuscating output
		Conclusion
	Tree Shaking
		Demonstrating tree shaking
		Tree shaking on package level
		Tree shaking with external packages
		Conclusion
	Environment Variables
		The basic idea of DefinePlugin
		Setting process.env.NODE_ENV
		Choosing which module to use
		Conclusion
	Adding Hashes to Filenames
		Placeholders
		Setting up hashing
		Conclusion
	Separating a Runtime
		Extracting a runtime
		Using records
		Integrating with asset pipelines
		Conclusion
	Build Analysis
		Configuring webpack
		Enabling a performance budget
		Dependency analysis
		Composition analysis
		Output plugins
		Online services
		Bundle comparison
		Unused files analysis
		Duplication analysis
		Understanding why a module was bundled
		Conclusion
	Performance
		Measuring impact
		High-level optimizations
		Low-level optimizations
		Optimizing rebundling speed during development
		Webpack 4 performance tricks
		Conclusion
VI Output
	Build Targets
		Web targets
		Node targets
		Desktop targets
		Conclusion
	Multiple Pages
		Possible approaches
		Generating multiple pages
		Progressive web applications
		Conclusion
	Server-Side Rendering
		Setting up Babel with React
		Setting up a React demo
		Configuring webpack
		Setting up a server
		Open questions
		Prerendering
		Conclusion
	Module Federation
		Module federation example
		Adding webpack configuration
		Implementing the application with React
		Separating bootstrap
		Separating header
		Pros and cons
		Learn more
		Conclusion
VII Techniques
	Dynamic Loading
		Dynamic loading with require.context
		Dynamic paths with a dynamic import
		Combining multiple require.contexts
		Dealing with dynamic paths
		Conclusion
	Web Workers
		Setting up a worker
		Setting up a host
		Sharing data
		Other options
		Conclusion
	Internationalization
		i18n with webpack
		Setting up translations
		Setting up webpack
		Setting up application
		Conclusion
	Testing
		Jest
		Mocking
		Removing files from tests
		Conclusion
	Deploying Applications
		Deploying with gh-pages
		Deploying to other environments
		Resolving output.publicPath dynamically
		Conclusion
	Consuming Packages
		resolve.alias
		resolve.modules
		resolve.extensions
		resolve.plugins
		Consuming packages outside of webpack
		Dealing with globals
		Managing symbolic links
		Removing unused modules
		Managing pre-built dependencies
		Getting insights on packages
		Conclusion
VIII Extending
	Extending with Loaders
		Debugging loaders with loader-runner
		Implementing an asynchronous loader
		Returning only output
		Writing files
		Passing options to loaders
		Connecting custom loaders with webpack
		Pitch loaders
		Caching with loaders
		Conclusion
	Extending with Plugins
		The basic flow of webpack plugins
		Setting up a development environment
		Implementing a basic plugin
		Capturing options
		Understanding compiler and compilation
		Writing files through compilation
		Managing warnings and errors
		Plugins can have plugins
		Conclusion
Conclusion
	General checklist
	Development checklist
	Production checklist
	Conclusion
Appendices
	Comparison of Build Tools
		Task runners
		Script loaders
		Bundlers
		Zero configuration bundlers
		Other Options
		Conclusion
	Hot Module Replacement
		Enabling HMR
		Implementing the HMR interface
		Setting WDS entry points manually
		HMR and dynamic loading
		Conclusion
	CSS Modules
		CSS Modules through css-loader
		Using CSS Modules with third-party libraries and CSS
		Conclusion
	Searching with React
		Implementing search with code splitting
		Conclusion
	Troubleshooting
		Module related errors
		DeprecationWarning
		Conclusion
	Glossary