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

Description

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.jsBook 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 BabelWho 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 Introduction to Webpack 5 Working with Modules and Code Splitting Using Configurations and Options APIs, Plugins, and Loaders Libraries and Frameworks Production, Integration, and Federated Modules Debugging and Migration Authoring Tutorials and Live Coding Hacks 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