- Foreword
- Preface
- Introduction
  - What Is Webpack
  - What Will You Learn
  - How Is The Book Organized
  - Who Is The Book For
  - Book Versioning
  - Getting Support
  - Additional Material
  - Acknowledgments
- What is Webpack
  - Webpack Relies on Modules
  - Webpack’s Execution Process
  - Webpack Is Configuration Driven
  - Hot Module Replacement
  - Code Splitting
  - Asset Hashing
  - Conclusion
I Developing
- 1. Getting Started
  - 1.1 Setting Up the Project
  - 1.2 Installing Webpack
  - 1.3 Executing Webpack
  - 1.4 Directory Structure
  - 1.5 Setting Up Assets
  - 1.6 Setting Up Webpack Configuration
  - 1.7 Adding a Build Shortcut
  - 1.8 HtmlWebpackPlugin Extensions
  - 1.9 Conclusion
- 2. Automatic Browser Refresh
  - 2.1 Webpack watch Mode and webpack-dev-server
  - 2.2 Emitting Files from WDS
  - 2.3 Getting Started with WDS
  - 2.4 Attaching WDS to the Project
  - 2.5 Verifying that --env Works
  - 2.6 Configuring WDS Through Webpack Configuration
  - 2.7 Enabling Hot Module Replacement
  - 2.8 Accessing the Development Server from Network
  - 2.9 Making It Faster to Develop Configuration
  - 2.10 Polling Instead of Watching Files
  - 2.11 Alternate Ways to Use webpack-dev-server
  - 2.12 Other Features of webpack-dev-server
  - 2.13 Development Plugins
  - 2.14 Conclusion
- 3. Linting JavaScript
  - 3.1 Brief Introduction to ESLint
  - 3.2 Linting Is About More than Catching Issues
  - 3.3 Setting Up ESLint
  - 3.4 ESLint Tips
  - 3.5 Webpack and JSHint
  - 3.6 Prettier
  - 3.7 Danger
  - 3.8 EditorConfig
  - 3.9 Conclusion
- 4. Composing Configuration
  - 4.1 Possible Ways to Manage Configuration
  - 4.2 Composing Configuration by Merging
  - 4.3 Setting Up webpack-merge
  - 4.4 Benefits of Composing Configuration
  - 4.5 Configuration Layouts
  - 4.6 Conclusion
II Styling
- 5. Loading Styles
  - 5.1 Loading CSS
  - 5.2 Setting Up the Initial CSS
  - 5.3 Understanding CSS Scoping and CSS Modules
  - 5.4 Loading Less
  - 5.5 Loading Sass
  - 5.6 Loading Stylus and Yeticss
  - 5.7 PostCSS
  - 5.8 Understanding Lookups
  - 5.9 Enabling Source Maps
  - 5.10 Converting CSS to Strings
  - 5.11 Using Bootstrap
  - 5.12 Conclusion
- 6. Separating CSS
  - 6.1 Setting Up ExtractTextPlugin
  - 6.2 Managing Styles Outside of JavaScript
  - 6.3 Conclusion
- 7. Autoprefixing
  - 7.1 Setting Up Autoprefixing
  - 7.2 Conclusion
- 8. Eliminating Unused CSS
  - 8.1 Setting Up Pure.css
  - 8.2 Enabling PurifyCSS
  - 8.3 Conclusion
- 9. Linting CSS
  - 9.1 Connecting Stylelint with package.json
  - 9.2 Connecting Stylelint with Webpack
  - 9.3 stylelint-webpack-plugin
  - 9.4 CSSLint
  - 9.5 Conclusion
III Loading Assets
- 10. Loader Definitions
  - 10.1 Anatomy of a Loader
  - 10.2 Loader Evaluation Order
  - 10.3 Passing Parameters to a Loader
  - 10.4 Branching at use Using a Function
  - 10.5 Inline Definitions
  - 10.6 Alternate Ways to Match Files
  - 10.7 Loading Based on resourceQuery
  - 10.8 Loading Based on issuer
  - 10.9 Understanding Loader Behavior
  - 10.10 LoaderOptionsPlugin
  - 10.11 Conclusion
- 11. Loading Images
  - 11.1 Setting Up url-loader
  - 11.2 Setting Up file-loader
  - 11.3 Integrating Images to the Project
  - 11.4 Loading SVGs
  - 11.5 Optimizing Images
  - 11.6 Utilizing srcset
  - 11.7 Loading Images Dynamically
  - 11.8 Getting Image Dimensions
  - 11.9 Referencing to Images
  - 11.10 Loading Sprites
  - 11.11 Images and css-loader Source Map Gotcha
  - 11.12 Conclusion
- 12. Loading Fonts
  - 12.1 Choosing One Format
  - 12.2 Supporting Multiple Formats
  - 12.3 Manipulating file-loader Output Path and publicPath
  - 12.4 Generating Font Files Based on SVGs
  - 12.5 Using Font Awesome
  - 12.6 Conclusion
- 13. Loading JavaScript
  - 13.1 Using Babel with Webpack Configuration
  - 13.2 Polyfilling Features
  - 13.3 Babel Tips
  - 13.4 Babel Presets and Plugins
  - 13.5 Enabling Presets and Plugins per Environment
  - 13.6 Setting Up TypeScript
  - 13.7 Setting Up Flow
  - 13.8 Conclusion
IV Building
- 14. Source Maps
  - 14.1 Inline Source Maps and Separate Source Maps
  - 14.2 Enabling Source Maps
  - 14.3 Source Map Types Supported by Webpack
  - 14.4 Inline Source Map Types
  - 14.5 Separate Source Map Types
  - 14.6 Other Source Map Options
  - 14.7 SourceMapDevToolPlugin and EvalSourceMapDevToolPlugin
  - 14.8 Changing Source Map Prefix
  - 14.9 Using Dependency Source Maps
  - 14.10 Source Maps for Styling
  - 14.11 Conclusion
- 15. Bundle Splitting
  - 15.1 The Idea of Bundle Splitting
  - 15.2 Adding Something to Split
  - 15.3 Setting Up a vendor Bundle
  - 15.4 Setting Up CommonsChunkPlugin
  - 15.5 Abstracting Bundle Extraction
  - 15.6 Loading dependencies to a vendor Bundle Automatically
  - 15.7 Performing a More Granular Split
  - 15.8 CommonsChunkPlugin children and async Flags
  - 15.9 Splitting and Merging Chunks
  - 15.10 Chunk Types in Webpack
  - 15.11 Conclusion
- 16. Code Splitting
  - 16.1 Code Splitting Formats
  - 16.2 Setting Up Code Splitting
  - 16.3 Code Splitting in React
  - 16.4 Conclusion
- 17. Tidying Up
  - 17.1 Cleaning the Build Directory
  - 17.2 Attaching a Revision to the Build
  - 17.3 Copying Files
  - 17.4 Conclusion
V Optimizing
- 18. Minifying
  - 18.1 Generating a Baseline Build
  - 18.2 Enabling a Performance Budget
  - 18.3 Minifying JavaScript
  - 18.4 Other Ways to Minify JavaScript
  - 18.5 Minifying CSS
  - 18.6 Minifying HTML
  - 18.7 Conclusion
- 19. Tree Shaking
  - 19.1 Demonstrating Tree Shaking
  - 19.2 Tree Shaking on Package Level
  - 19.3 Conclusion
- 20. Environment Variables
  - 20.1 The Basic Idea of DefinePlugin
  - 20.2 Setting process.env.NODE_ENV
  - 20.3 Replacing Free Variables Through Babel
  - 20.4 Choosing Which Module to Use
  - 20.5 Webpack Optimization Plugins
  - 20.6 Conclusion
- 21. Adding Hashes to Filenames
  - 21.1 Placeholders
  - 21.2 Setting Up Hashing
  - 21.3 Enabling HashedModuleIdsPlugin
  - 21.4 Conclusion
- 22. Separating a Manifest
  - 22.1 Extracting a Manifest
  - 22.2 Using Records
  - 22.3 Conclusion
- 23. Analyzing Build Statistics
  - 23.1 Configuring Webpack
  - 23.2 Available Analysis Tools
  - 23.3 Independent Tools
  - 23.4 Conclusion
- 24. Performance
  - 24.1 High-Level Optimizations
  - 24.2 Low-Level Optimizations
  - 24.3 Optimizing Rebundling Speed During Development
  - 24.4 Conclusion
VI Output
- 25. Build Targets
  - 25.1 Web Targets
  - 25.2 Node Targets
  - 25.3 Desktop Targets
  - 25.4 Conclusion
- 26. Bundling Libraries
  - 26.1 Setting Up a Library
  - 26.2 Setting Up an npm Script
  - 26.3 Setting Up Webpack
  - 26.4 Cleaning and Linting Before Building
  - 26.5 Cleaning and Linting Through npm
  - 26.6 Conclusion
- 27. Library Output
  - 27.1 var
  - 27.2 window, global, assign, this
  - 27.3 CommonJS
  - 27.4 AMD
  - 27.5 UMD
  - 27.6 JSONP
  - 27.7 SystemJS
  - 27.8 Conclusion
- 28. Multiple Pages
  - 28.1 Possible Approaches
  - 28.2 Generating Multiple Pages
  - 28.3 Generating Multiple Pages While Sharing Code
  - 28.4 Progressive Web Applications
  - 28.5 Conclusion
- 29. Server Side Rendering
  - 29.1 Setting Up Babel with React
  - 29.2 Configuring React with ESLint
  - 29.3 Setting Up a React Demo
  - 29.4 Configuring Webpack
  - 29.5 Setting Up a Server
  - 29.6 Watching SSR Changes and Refreshing the Browser
  - 29.7 Open Questions
  - 29.8 Conclusion
VII Techniques
- 30. Dynamic Loading
  - 30.1 Dynamic Loading with require.context
  - 30.2 Combining Multiple require.contexts
  - 30.3 Dynamic Paths with a Dynamic import
  - 30.4 Dealing with Dynamic Paths
  - 30.5 Conclusion
- 31. Web Workers
  - 31.1 Setting Up Worker Loader
  - 31.2 Setting Up a Worker
  - 31.3 Setting Up a Host
  - 31.4 Conclusion
- 32. Internationalization
  - 32.1 i18n with Webpack
  - 32.2 Setting Up a Project
  - 32.3 Setting Up I18nWebpackPlugin
  - 32.4 Conclusion
- 33. Testing
  - 33.1 Mocha
  - 33.2 Karma and Mocha
  - 33.3 Jest
  - 33.4 AVA
  - 33.5 Mocking
  - 33.6 Conclusion
- 34. Deploying Applications
  - 34.1 Deploying with gh-pages
  - 34.2 Deploying to Other Environments
  - 34.3 Resolving output.publicPath Dynamically
  - 34.4 Conclusion
VIII Packages
- 35. Consuming Packages
  - 35.1 Understanding SemVer
  - 35.2 Dependency Types
  - 35.3 Consumption Workflow
  - 35.4 Understanding npm Lookup
  - 35.5 Version Ranges
  - 35.6 Shrinkwrapping Versions
  - 35.7 Keeping Dependencies Up to Date
  - 35.8 Tracking Dependencies
  - 35.9 Conclusion
- 36. Package Consuming Techniques
  - 36.1 Tweaking Module Resolution
  - 36.2 Consuming Packages Outside of Webpack
  - 36.3 Dealing with Globals
  - 36.4 Removing Unused Modules
  - 36.5 Managing Pre-built Dependencies
  - 36.6 Managing Symbolic Links
  - 36.7 Getting Insights on Packages
  - 36.8 Conclusion
- 37. Authoring Packages
  - 37.1 Anatomy of an npm Package
  - 37.2 Understanding package.json
  - 37.3 npm Workflow
  - 37.4 Conclusion
- 38. Package Authoring Techniques
  - 38.1 npm Lifecycle Hooks
  - 38.2 Avoiding Bundling Dependencies
  - 38.3 Processing Node Version through Babel
  - 38.4 Generating a Distribution for Development Usage
  - 38.5 Deprecating, Unpublishing, and Renaming Packages
  - 38.6 Sharing Authorship
  - 38.7 Conclusion
IX Extending
- 39. Extending with Loaders
  - 39.1 Debugging Loaders with loader-runner
  - 39.2 Implementing an Asynchronous Loader
  - 39.3 Returning Only Output
  - 39.4 Writing Files
  - 39.5 Passing Options to Loaders
  - 39.6 Connecting Custom Loaders with Webpack
  - 39.7 Pitch Loaders
  - 39.8 Caching with Loaders
  - 39.9 Conclusion
- 40. Extending with Plugins
  - 40.1 The Basic Flow of Webpack Plugins
  - 40.2 Setting Up a Development Environment
  - 40.3 Implementing a Basic Plugin
  - 40.4 Capturing Options
  - 40.5 Understanding Compiler and Compilation
  - 40.6 Writing Files Through Compilation
  - 40.7 Managing Warnings and Errors
  - 40.8 Plugins Can Have Plugins
  - 40.9 Plugins Can Run Compilers of Their Own
  - 40.10 Conclusion
Conclusion
- - General Checklist
  - Development Checklist
  - Production Checklist
  - Conclusion
Appendices
- Comparison of Build Tools
  - Task Runners and Bundlers
  - Make
  - RequireJS
  - npm scripts as a Task Runner
  - Grunt
  - Gulp
  - Browserify
  - JSPM
  - Brunch
  - Webpack
  - Other Options
  - Conclusion
- Hot Module Replacement
  - Enabling HMR
  - Making the Module Ids More Debuggable
  - Implementing the HMR Interface
  - Setting WDS Entry Points Manually
  - Conclusion
- Hot Module Replacement with React
  - Setting Up Babel
  - Setting Up Webpack
  - Setting Up the Application
  - Removing react-hot-loader Related Code from the Production Output
  - Configuring HMR with Redux
  - Configuring Webpack to Work with JSX
  - Get Started Fast with create-react-app
  - Conclusion
- Customizing ESLint
  - Skipping ESLint Rules
  - Setting Environment
  - Writing ESLint Plugins
  - ESLint Resources
  - Conclusion
- Searching with React
  - Implementing Search with Code Splitting
  - Conclusion
- Troubleshooting
  - ERROR in Entry module not found
  - ERROR … Module not found
  - Loader Not Found
  - Module parse failed
  - Module build failed: Unknown word
  - SyntaxError: Unexpected token
  - Conclusion
- Glossary
  - Introduction
  - Developing
  - Loading
  - Building
  - Optimizing
  - Output

About

Authors

Author Support

More

Legal