Webpack 5 Up and Running: A quick and practical introduction to the JavaScript application bundler

✍ Scribed by Tom Owens

• Publisher: Packt Publishing
• Year: 2020
• Tongue: English
• Leaves: 213
• Category: Library

✦ Synopsis

Improve the development workflow and manage utilities with the latest Webpack and Babel features

Key Features

• A beginner's guide to understanding application bundling and Webpack project structure
• Leverage Webpack's modular builds to optimize the performance of your web apps
• Discover how Webpack facilitates package bundling and understand its integration with Angular and Vue.js

Book Description

Webpack has emerged as one of the most popular module bundlers used in web development projects, and serves as one of the most advanced web development build tools.

This quick reference begins with an introduction to Webpack and teaches you how to use it for initializing dependency management in your web projects. Starting with code splitting and transpiling, you will be taught about dependency graphs and how to configure them to achieve improved functionality and uncover hidden features. You'll also learn the difference between configuration files and options, and how Node.js plays a role in their creation and management. As you advance, you will delve into frameworks and unsupported code, which can be processed using loaders. Moving on, you'll be well on your way to performing application bundling efficiently, and will be introduced to the art of custom loader creation and plugin development.

By the end of this Webpack book, you'll have gained a basic understanding of deployment, live coding, and even hot module replacement, and you'll be able to incorporate application bundling in your web project efficiently.

What you will learn

• Get to grips with Webpack bundle configuration and set options
• Optimize your JavaScript projects by using code-splitting techniques
• Efficiently handle dependencies in complex web apps
• Break down complex problems into simple ones using advanced debugging procedures
• Master version migration and deployment hurdles
• Effectively deploy the Webpack application using Babel

Who this book is for

The book is for web developers looking to get started with dependency management in their web project by learning Webpack. Working knowledge of JavaScript is assumed.

Table of Contents

1. Introduction to Webpack 5
2. Working with Modules and Code Splitting
3. Using Configurations and Options
4. APIs, Plugins, and Loaders
5. Libraries and Frameworks
6. Production, Integration, and Federated Modules
7. Debugging and Migration
8. Authoring Tutorials and Live Coding Hacks

✦ Table of Contents

Cover
Title Page
Copyright and Credits
Dedication
About Packt
Contributors
Table of Contents
Preface
Chapter 1: Introduction to Webpack 5
Technical requirements
The fundamentals of Webpack 5
General concepts behind Webpack 5
Terminology
How Webpack works
What's new in Webpack 5? 
Modes
Setting up Webpack
Creating a sample project
Bundling your first project
Summary
Questions
Chapter 2: Working with Modules and Code Splitting
Explaining modules
The function of modules
Supported module languages and loaders
Module resolution
Absolute paths
Relative paths
Module paths
Understanding code splitting
Entry points
Preventing duplication with SplitChunksPlugin
Dynamic imports
Caching
Prefetching and preloading modules
Best practices
Bundle analysis
Code linting
Summary
Questions
Further reading
Chapter 3: Using Configurations and Options
Understanding configurations
Using different configuration files
Working with options
Understanding asset management
Setting up the project for asset management configurations
Loading CSS files
Loading images
Loading fonts
Loading data
Adding global assets
Wrapping up the tutorial with best practice
Understanding output management 
Output management tutorial preparation
Setting up the HtmlWebpackPlugin
Cleaning up the distribution directory
Utilizing the manifest
Exploring Webpack 5 options
AMD
Bail
Cache
Loader
Profile
Parallelism
Records Path
Records Input Path
Records Output Path
Name
Summary
Questions
Chapter 4: APIs, Plugins, and Loaders
Loaders
cache-loader
worker-loader
coffee-loader
coverjs
i18n-loader
imports-loader
polymer-loader
script-loader
source-map-loader
less-loader
APIs
Babel and its loader builder
The Node.js API
Plugins
BabelMinifyWebpackPlugin
CommonsChunkPlugin
ContextReplacementPlugin
HtmlWebpackPlugin
LimitChunkCountPlugin
Summary
Questions
Chapter 5: Libraries and Frameworks
Best practices
Working with JSON
Working with YAML
Working with Angular
Working with Vue.js
Summary
Further reading
Questions
Chapter 6: Production, Integration, and Federated Modules
Production setup
Shimming
Progressive web applications
Integrating task runners
GitHub
Extracting boilerplate
Module Federation
Building our first federated application
The second application
The third application
Duplication issues
Summary
Questions
Further reading
Chapter 7: Debugging and Migration
Debugging
Hot module replacement
Using DevServer with the Node.js API
HMR and style sheets
Other loaders and frameworks
Adding a utility
Migration
Prerequisites when migrating to version 4 from version 3
Prerequisites when migrating to version 5 from version 4
Enabling persistent caching
Updating Webpack
Summary
Further reading
Questions
Chapter 8: Authoring Tutorials and Live Coding Hacks
Authoring libraries
The basic configuration
Using externals to avoid bundling lodash
Specifying external limitations
Exposing the library
Naming the library and working with Node.js
Custom loaders
Setup
Simple usage
Complex usage
Guidelines
Simplifying the purpose of the loader
Utilizing chaining
Modular outputting
Ensuring statelessness
Employing loader utilities
Marking loader dependencies
Resolving module dependencies
Extracting common code
Avoiding absolute paths
Using peer dependencies
Unit testing
Live coding hacks
Monkey Hot Loader
React Hot Patching
Eval
The __Eval hack
Summary
Questions
Assessment
Other Books You May Enjoy
Index