0%

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