webpack-advanced-techniques
Last updated
Was this helpful?
Last updated
Was this helpful?
Webpack: Build Performance Webpack docs on ways to speed up builds.
How to make your webpack builds 10x faster Slideshow that lists a number of approaches for making Webpack builds faster, such as narrowing scope, using the DllPlugin, using HappyPack for parallel builds, and more.
Advanced Frontend Optimization with Webpack Slides by Sokra describing ways to improve Webpack builds.
React-Router and Webpack in Production Tips on dynamically loading route views and optimizing chunk sizes
Fixing annoying imports in React Projects A quick example of using Webpack's module aliasing to simplify import paths, with further discussion in the comments.
Webpack Plugins we been keeping on the DLL An overview of Webpack's DllPlugin, and how it can be used for faster dev builds.
Webpack Async Bundle Loading A quick look at how to delay-load some portion of your app's code.
DllPlugin usage summary Notes from a user who wants to document his findings on usage of DllPlugin. Pretty thorough.
Implement Webpack DLL Plugin for React-Boilerplate A PR adding usage of DllPlugin to React-Boilerplate. Thorough and well-commented - should be a very useful reference to anyone trying to set it up in their own project.
Optimizing Webpack Explains how to use DllPlugin to pre-bundle vendor libraries for faster build times.
Manually Tuning Webpack Builds Tips for cutting down bundle sizes by removing duplicate library instances and fine-tuning usage of various libraries.
Chat discussion - summary of process.env.NODE_ENV and its use with Webpack
An overview of how the process.env.NODE_ENV variable is often used to define optimizations for Webpack production builds
Webpack and Hot Module Replacement A great in-depth walkthrough of how HMR works
Webpack's HMR and React Hot-Loader - The Missing Manual Demonstrates three ways to enable HMR, and usage with three different React application scenarios
Hot Reloading in React Dan Abramov walks through the history of his React Hot Loader and React Transform tools, describes their implementation, flaws, and weaknesses, and looks at a potential solution (later implemented in React Hot Loader 3.0).
HMR Tutorial Series A very readable and informative series of articles on using HMR.
Live Editing Javascript with Webpack Some interesting and advanced tricks for ways HMR could be used.
Using React with "plain" Webpack HMR Dan Abramov removes use of the React-Transform plugin from Redux's examples, and demonstrates how to use the "plain" Webpack HMR API to do reloading of updated components, reducers, and other code.
Basic HMR Usage Example An extracted example demonstrating using "plain" HMR to reload components, reducers, and even sagas.
Course: Using Webpack for Production Javascript Apps A video course by Kent C. Dodds, covering a number of very useful Webpack techniques for real-world apps. Requires an Egghead subscription, but solid and useful info.
Javascript at Tumblr - Switching to Webpack Tumblr's dev team talks about switching from Browserify to Webpack, their migration steps, and some useful tips learned about pieces like CommonsChunkPlugin.
Webpack HTML plugin in a Nutshell Looks at what the HTML Webpack plugin can do and how to use it.
Truly Multiple Entries with Webpack Instructions on how to configure multiple entry points properly
Long-term caching of static assets with Webpack Gathers documentation on proper use of asset caching into one article to act as a complete guide.
Goodbye "../../../" Tips and discussion on removing relative paths when importing
Using the HTML Webpack Plugin for generating HTML files Basic instructions for setting up the HTML Webpack plugin
Setting up CSS Modules with React and Webpack Covers setting up and configuring Webpack to use CSS Modules for styling