Leanpub Header

Skip to main content
Go to Leanpub.comLeanpub

SurviveJS - Webpack 5

From apprentice to master

Juho Vepsäläinen, Tobias Koppers, and Jesús Rodríguez Rodríguez

Webpack, a module bundler, is a powerful tool that helps you to develop complex web applications. "SurviveJS - Webpack" is meant for beginner to intermediate users of the tool that want to understand webpack better.

Minimum price

$19.99

$19.99

You pay

$19.99

Authors earn

$15.99

Packages

Details
$

...Or Buy With Credits!

You can get credits monthly with a Reader Membership
PDF
EPUB
WEB
3,263
Readers
301
Pages
47,814Words
About

About

About the Book

"SurviveJS - Webpack 5" has been built around a tutorial during which you develop a complex configuration while covering different facets of webpack. The 34 short chapters and six appendices work as a reference you can use while developing your web applications. The book has been written with webpack 5 in mind.

Even though the book has been designed around webpack, many of the techniques covered go beyond it. You will learn to improve the quality of your code while becoming aware of optimization techniques that help you to deliver more performant web applications.

The book was developed in collaboration with the webpack community, and its structure has evolved accordingly. A third of royalties go to Tobias Koppers, the author of the tool. The writer is a core developer of webpack so by purchasing this book you will support the effort in multiple ways.

The content has been split as below:

  • Foreword by Tobias Koppers, the author of webpack
  • Preface by Juho Vepsäläinen, the author of the book and a core developer of webpack
  • What is Webpack? - Learn what makes webpack tick
  • Developing - Set up a development environment on top of webpack
  • Styling - Load and manage styles while learning about topics like autoprefixing and eliminating unused CSS
  • Loading Assets - Load different asset types and process them
  • Building - Write initial build with webpack and learn techniques like bundle and code splitting
  • Optimizing - Learn to optimize the build results by minifying, tree shaking, and other techniques
  • Output - Understand webpack's output formats, multiple page builds, and module federation
  • Techniques - Learn specific techniques related to topics such as testing and consuming packages
  • Extending - Extend webpack with loaders and plugins
  • Conclusion - Recap core techniques
  • Appendices - Learn how webpack compares with other tools, how to set up Hot Module Replacement, troubleshoot webpack
The Leanpub edition comes with a two page PDF cheatsheet that covers the main ideas of webpack in a compact format. It's also available in poster form (single A3, either portrait or landscape). You also get a ~20 page QA PDF where Tobias Koppers, the creator of the tool answers to tough questions.

Share this book

Categories

Software EngineeringJavaScriptReactES6Web Development

Feedback

Email the Authors

License

Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License

Packages

Pick Your Package

All packages include the ebook in the following formats: PDF, EPUB, and Web

The Book

Minimum price

Suggested price$19.99

The book in pdf, epub, mobi. The source code is available at https://github.com/survivejs/webpack.

$19.99

  • Cheatsheet
    Cheatsheet covering webpack's core ideas.
  • QA with Tobias Koppers, the creator of the tool
    This brief document (30+) pages contains QA (questions/answers) with Tobias Koppers, the creator of the tool. Read it to gain more insight into webpack and where it's going.
  • Posters
    Posters covering webpack's core ideas. Print in A3 for the best result.

One for a friend too

Minimum price

Suggested price$33.99

Get a copy for a friend as well. Includes two copies.

$33.99

  • Cheatsheet
    Cheatsheet covering webpack's core ideas.
  • QA with Tobias Koppers, the creator of the tool
    This brief document (30+) pages contains QA (questions/answers) with Tobias Koppers, the creator of the tool. Read it to gain more insight into webpack and where it's going.
  • Posters
    Posters covering webpack's core ideas. Print in A3 for the best result.

This book is also available in the following packages:

  • One for the team

    Get copies for your team mates. Or friends. I don't discriminate. Includes four copies.

    • Cheatsheet
      Cheatsheet covering webpack's core ideas.
    • QA with Tobias Koppers, the creator of the tool
      This brief document (30+) pages contains QA (questions/answers) with Tobias Koppers, the creator of the tool. Read it to gain more insight into webpack and where it's going.
    • Posters
      Posters covering webpack's core ideas. Print in A3 for the best result.
    Minimum price
    $63.99
    Suggested price
    $63.99

Author

About the Authors

Juho Vepsäläinen

Juho Vepsäläinen is behind the SurviveJS effort. In addition to being a core developer of webpack, I have been active in the open source scene since the early 2000s. Blue Arrow Awards winner.

Tobias Koppers

Jesús Rodríguez Rodríguez

Jesús Rodríguez Rodríguez is a frontend developer who dedicates his time to moderate the official Angular.js IRC channel and he also gives support there.

He spent some time collaborating with organization like AngularUI and he also write in his blog (http://www.angular-tips.com) all about angular.

He also likes to edit / review books, that also includes writing his own books.

Contents

Table of Contents

Foreword

Preface

Introduction

  1. What is webpack
  2. How webpack changes the situation
  3. What will you learn
  4. How is the book organized
  5. Who is the book for
  6. What are the book conventions
  7. How is the book versioned
  8. How to get support
  9. Where to find additional material
  10. Acknowledgments

What is Webpack

  1. Webpack relies on modules
  2. Webpack’s execution process
  3. Webpack is configuration driven
  4. Hot Module Replacement
  5. Asset hashing
  6. Code splitting
  7. Webpack 5
  8. Conclusion
  9. IDeveloping

1.Getting Started

  1. 1.1Setting up the project
  2. 1.2Installing webpack
  3. 1.3Running webpack
  4. 1.4Setting up assets
  5. 1.5Configuring mini-html-webpack-plugin
  6. 1.6Examining the output
  7. 1.7Adding a build shortcut
  8. 1.8Conclusion

2.Development Server

  1. 2.1Webpack watch mode
  2. 2.2webpack-dev-server
  3. 2.3webpack-plugin-serve
  4. 2.4Accessing development server from the network
  5. 2.5Polling instead of watching files
  6. 2.6Making it faster to develop webpack configuration
  7. 2.7Watching files outside of webpack’s module graph
  8. 2.8Conclusion

3.Composing Configuration

  1. 3.1Possible ways to manage configuration
  2. 3.2Composing configuration by merging
  3. 3.3Setting up webpack-merge
  4. 3.4Benefits of composing configuration
  5. 3.5Configuration layouts
  6. 3.6Conclusion
  7. IIStyling

4.Loading Styles

  1. 4.1Loading CSS
  2. 4.2Setting up initial CSS
  3. 4.3PostCSS
  4. 4.4Using CSS preprocessors
  5. 4.5Understanding css-loader lookups
  6. 4.6Conclusion

5.Separating CSS

  1. 5.1Setting up MiniCssExtractPlugin
  2. 5.2Managing styles outside of JavaScript
  3. 5.3Conclusion

6.Eliminating Unused CSS

  1. 6.1Setting up Tailwind
  2. 6.2Enabling PurgeCSS
  3. 6.3Conclusion

7.Autoprefixing

  1. 7.1Setting up autoprefixing
  2. 7.2Defining a browserslist
  3. 7.3Conclusion
  4. IIILoading Assets

8.Loader Definitions

  1. 8.1Anatomy of a loader
  2. 8.2Loader evaluation order
  3. 8.3Passing parameters to a loader
  4. 8.4Inline definitions
  5. 8.5Branching at use using a function
  6. 8.6Loading with info object
  7. 8.7Loading based on resourceQuery
  8. 8.8Loading based on issuer
  9. 8.9Alternate ways to match files
  10. 8.10Understanding loader behavior
  11. 8.11Conclusion

9.Loading Images

  1. 9.1Integrating images to the project
  2. 9.2Using srcsets
  3. 9.3Optimizing images
  4. 9.4Loading SVGs
  5. 9.5Loading images dynamically
  6. 9.6Loading sprites
  7. 9.7Using placeholders
  8. 9.8Referencing to images
  9. 9.9Conclusion

10.Loading Fonts

  1. 10.1Setting up a loader
  2. 10.2Using icon fonts
  3. 10.3Using Google Fonts
  4. 10.4Manipulating file-loader output path and publicPath
  5. 10.5Eliminating unused characters
  6. 10.6Generating font files based on SVGs
  7. 10.7Conclusion

11.Loading JavaScript

  1. 11.1Using Babel with webpack configuration
  2. 11.2Polyfilling features
  3. 11.3Babel tips
  4. 11.4Babel plugins
  5. 11.5Generating differential builds
  6. 11.6TypeScript
  7. 11.7WebAssembly
  8. 11.8Conclusion
  9. IVBuilding

12.Source Maps

  1. 12.1Inline source maps and separate source maps
  2. 12.2Enabling source maps
  3. 12.3Source map types supported by webpack
  4. 12.4Inline source map types
  5. 12.5Separate source map types
  6. 12.6Other source map options
  7. 12.7SourceMapDevToolPlugin and EvalSourceMapDevToolPlugin
  8. 12.8Changing source map prefix
  9. 12.9Extracting source from source maps
  10. 12.10Source maps on backend
  11. 12.11Ignoring source map related warnings
  12. 12.12Using dependency source maps
  13. 12.13Conclusion

13.Code Splitting

  1. 13.1Code splitting formats
  2. 13.2Controlling code splitting on runtime
  3. 13.3Code splitting in React
  4. 13.4Disabling code splitting
  5. 13.5Machine learning driven prefetching
  6. 13.6Conclusion

14.Bundle Splitting

  1. 14.1Adding something to split
  2. 14.2Setting up a vendor bundle
  3. 14.3Controlling bundle splitting
  4. 14.4Splitting and merging chunks
  5. 14.5Bundle splitting at entry configuration
  6. 14.6Chunk types in webpack
  7. 14.7Conclusion

15.Tidying Up

  1. 15.1Cleaning the build directory
  2. 15.2Attaching a revision to the build
  3. 15.3Copying files
  4. 15.4Conclusion
  5. VOptimizing

16.Minifying

  1. 16.1Minifying JavaScript
  2. 16.2Speeding up JavaScript execution
  3. 16.3Minifying HTML
  4. 16.4Minifying CSS
  5. 16.5Compressing bundles
  6. 16.6Obfuscating output
  7. 16.7Conclusion

17.Tree Shaking

  1. 17.1Demonstrating tree shaking
  2. 17.2Tree shaking on package level
  3. 17.3Tree shaking with external packages
  4. 17.4Conclusion

18.Environment Variables

  1. 18.1The basic idea of DefinePlugin
  2. 18.2Setting process.env.NODE_ENV
  3. 18.3Choosing which module to use
  4. 18.4Conclusion

19.Adding Hashes to Filenames

  1. 19.1Placeholders
  2. 19.2Setting up hashing
  3. 19.3Conclusion

20.Separating a Runtime

  1. 20.1Extracting a runtime
  2. 20.2Using records
  3. 20.3Integrating with asset pipelines
  4. 20.4Conclusion

21.Build Analysis

  1. 21.1Configuring webpack
  2. 21.2Enabling a performance budget
  3. 21.3Dependency analysis
  4. 21.4Composition analysis
  5. 21.5Output plugins
  6. 21.6Online services
  7. 21.7Bundle comparison
  8. 21.8Unused files analysis
  9. 21.9Duplication analysis
  10. 21.10Understanding why a module was bundled
  11. 21.11Conclusion

22.Performance

  1. 22.1Measuring impact
  2. 22.2High-level optimizations
  3. 22.3Low-level optimizations
  4. 22.4Optimizing rebundling speed during development
  5. 22.5Webpack 4 performance tricks
  6. 22.6Conclusion
  7. VIOutput

23.Build Targets

  1. 23.1Web targets
  2. 23.2Node targets
  3. 23.3Desktop targets
  4. 23.4Conclusion

24.Multiple Pages

  1. 24.1Possible approaches
  2. 24.2Generating multiple pages
  3. 24.3Progressive web applications
  4. 24.4Conclusion

25.Server-Side Rendering

  1. 25.1Setting up Babel with React
  2. 25.2Setting up a React demo
  3. 25.3Configuring webpack
  4. 25.4Setting up a server
  5. 25.5Open questions
  6. 25.6Prerendering
  7. 25.7Conclusion

26.Module Federation

  1. 26.1Module federation example
  2. 26.2Adding webpack configuration
  3. 26.3Implementing the application with React
  4. 26.4Separating bootstrap
  5. 26.5Separating header
  6. 26.6Pros and cons
  7. 26.7Learn more
  8. 26.8Conclusion
  9. VIITechniques

27.Dynamic Loading

  1. 27.1Dynamic loading with require.context
  2. 27.2Dynamic paths with a dynamic import
  3. 27.3Combining multiple require.contexts
  4. 27.4Dealing with dynamic paths
  5. 27.5Conclusion

28.Web Workers

  1. 28.1Setting up a worker
  2. 28.2Setting up a host
  3. 28.3Sharing data
  4. 28.4Other options
  5. 28.5Conclusion

29.Internationalization

  1. 29.1i18n with webpack
  2. 29.2Setting up translations
  3. 29.3Setting up webpack
  4. 29.4Setting up application
  5. 29.5Conclusion

30.Testing

  1. 30.1Jest
  2. 30.2Mocking
  3. 30.3Removing files from tests
  4. 30.4Conclusion

31.Deploying Applications

  1. 31.1Deploying with gh-pages
  2. 31.2Deploying to other environments
  3. 31.3Resolving output.publicPath dynamically
  4. 31.4Conclusion

32.Consuming Packages

  1. 32.1resolve.alias
  2. 32.2resolve.modules
  3. 32.3resolve.extensions
  4. 32.4resolve.plugins
  5. 32.5Consuming packages outside of webpack
  6. 32.6Dealing with globals
  7. 32.7Managing symbolic links
  8. 32.8Removing unused modules
  9. 32.9Managing pre-built dependencies
  10. 32.10Getting insights on packages
  11. 32.11Conclusion
  12. VIIIExtending

33.Extending with Loaders

  1. 33.1Debugging loaders with loader-runner
  2. 33.2Implementing an asynchronous loader
  3. 33.3Returning only output
  4. 33.4Writing files
  5. 33.5Passing options to loaders
  6. 33.6Connecting custom loaders with webpack
  7. 33.7Pitch loaders
  8. 33.8Caching with loaders
  9. 33.9Conclusion

34.Extending with Plugins

  1. 34.1The basic flow of webpack plugins
  2. 34.2Setting up a development environment
  3. 34.3Implementing a basic plugin
  4. 34.4Capturing options
  5. 34.5Understanding compiler and compilation
  6. 34.6Writing files through compilation
  7. 34.7Managing warnings and errors
  8. 34.8Plugins can have plugins
  9. 34.9Conclusion
  10. Conclusion
  11. General checklist
  12. Development checklist
  13. Production checklist
  14. Conclusion
  15. Appendices

Comparison of Build Tools

  1. Task runners
  2. Script loaders
  3. Bundlers
  4. Zero configuration bundlers
  5. Other Options
  6. Conclusion

Hot Module Replacement

  1. Enabling HMR
  2. Implementing the HMR interface
  3. Setting WDS entry points manually
  4. HMR and dynamic loading
  5. Conclusion

CSS Modules

  1. CSS Modules through css-loader
  2. Using CSS Modules with third-party libraries and CSS
  3. Conclusion

Searching with React

  1. Implementing search with code splitting
  2. Conclusion

Troubleshooting

  1. Module related errors
  2. DeprecationWarning
  3. Conclusion

Glossary

The Leanpub 60 Day 100% Happiness Guarantee

Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.

You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!

So, there's no reason not to click the Add to Cart button, is there?

See full terms...

Earn $8 on a $10 Purchase, and $16 on a $20 Purchase

We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.

(Yes, some authors have already earned much more than that on Leanpub.)

In fact, authors have earned over $14 million writing, publishing and selling on Leanpub.

Learn more about writing on Leanpub

Free Updates. DRM Free.

If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).

Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.

Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.

Learn more about Leanpub's ebook formats and where to read them

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!

Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.

Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.

Learn more about writing on Leanpub