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

✍ Scribed by Mohamed Bouzid

• Publisher: Apress
• Year: 2020
• Tongue: English
• Leaves: 138
• Edition: 1
• Category: Library

✦ Synopsis

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 settings
• Efficiently work with plugins and loaders
• Optimize Webpack for production
• Use instant refreshing with the Webpack dev server and hot module replacement
• Explore 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

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