وب‌پک برای مبتدیان: راهنمای گام به گام شما برای یادگیری وب‌پک ۴

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 5 About the Author 8 About the Technical Reviewer 9 Why Webpack? 10 Chapter 1: Webpack: First Steps 14 Installing Webpack 14 Webpack 4 Zero Config 18 The Bundling Command 21 Summary 23 Chapter 2: Write Modular Code 24 Separate in Multiple Files 24 Calling a Function from an External File 24 Webpack Custom Configuration 27 Creating Our Configuration File 27 Altering the Default Output 28 Development Mode 30 Summary 33 Chapter 3: Loaders and Plugins 34 Loaders vs. Plugins 34 Using Babel-Loader 35 Debugging Our JavaScript 38 Source Map 38 Handling CSS and SASS Files 42 Importing CSS in JavaScript 42 Loading CSS with CSS-Loader 43 Injecting CSS to Our HTML 45 Compiling SASS to CSS 46 Prefixing CSS with Vendor Prefixes 48 Extract CSS to Its Own Separate File 53 Minifying the Extracted CSS 56 Handling Images 58 Loading Image Files 58 Compressing Images 62 Summary 64 Chapter 4: Cache 65 Output Files Naming 65 Adding Hash Content 69 Cleaning the Build Directory 73 Manifest Plugin 75 Alternative to Manifest 77 Summary 80 Chapter 5: Resolving Folders 81 Organizing Our Files 81 Aliases 84 Resolving Modules 85 Summary 89 Chapter 6: Webpack DevServer 90 Installing and Configuring Webpack Dev Server 90 Understanding publicPath option 94 Hot Module Replacement 96 Summary 106 Chapter 7: Installing Third-Party Libraries 107 Welcome Isolation, Goodbye Global Variables 107 Using Bootstrap with Webpack 115 Webpack ProvidePlugin 120 Installing jQuery-UI 123 Installing QuillJS 127 Installing CKEDITOR 131 Lazy Loading 132 Summary 134 Chapter 8: Conclusion 135 Index 136