Webpack for Beginners: Your Step by Step Guide to Learning Webpack 4

Description

Learn how to use Webpack from installation to configuration without the hassle of complex examples. Webpack has become one of the most popular module bundlers in recent years; it’s widely used by developers, companies, and organizations of all sizes, and many web frameworks use it for the management of their assets. If you are serious about web development these days then you must learn and understand Webpack. You will begin by installing and configuring Webpack, and learn how to write modular code. You’ll then move onto understanding the usage of loaders and plugins with practical use cases, how to make aliases and resolve folders, cache busting, and installing third-party libraries such as jQuery, Bootstrap, QuillJS, and more. By the end of this book you will feel confident and ready to start using Webpack in your projects. Free from complex examples and intended to be as easy-to-follow as possible, this book is ideal for anyone who knows basic HTML, JavaScript, and how to work on the command line. Upgrade your developer skillset using Webpack for Beginners today. What You Will Learn Install and configure Webpack beyond the default settingsEfficiently work with plugins and loadersOptimize Webpack for productionUse instant refreshing with the Webpack dev server and hot module replacementExplore how to install some common JavaScript libraries Who This Book Is For This book is conceived for beginners and newcomers to Webpack, and assumes you have some very basic knowledge in Javascript, HTML and working on the command line. This step-by-step guide will help you understand and clarify everything you need to know to bundle your JavaScript hassle-free.  Table of Contents About the Author About the Technical Reviewer Why Webpack? Chapter 1: Webpack: First Steps Installing Webpack Webpack 4 Zero Config The Bundling Command Summary Chapter 2: Write Modular Code Separate in Multiple Files Calling a Function from an External File Webpack Custom Configuration Creating Our Configuration File Altering the Default Output Development Mode Summary Chapter 3: Loaders and Plugins Loaders vs. Plugins Using Babel-Loader Debugging Our JavaScript Source Map Handling CSS and SASS Files Importing CSS in JavaScript Loading CSS with CSS-Loader Injecting CSS to Our HTML Compiling SASS to CSS Prefixing CSS with Vendor Prefixes Extract CSS to Its Own Separate File Minifying the Extracted CSS Handling Images Loading Image Files Compressing Images Summary Chapter 4: Cache Output Files Naming Adding Hash Content Cleaning the Build Directory Manifest Plugin Alternative to Manifest Summary Chapter 5: Resolving Folders Organizing Our Files Aliases Resolving Modules Summary Chapter 6: Webpack DevServer Installing and Configuring Webpack Dev Server Understanding publicPath option Hot Module Replacement Summary Chapter 7: Installing Third-Party Libraries Welcome Isolation, Goodbye Global Variables Using Bootstrap with Webpack Webpack ProvidePlugin Installing jQuery-UI Installing QuillJS Installing CKEDITOR Lazy Loading Summary Chapter 8: Conclusion Index