I put this repository together to serve as a crash course for getting started with Webpack. It includes a presentation and a number of small apps to demonstrate the basic and differentiating features of the module bundler.
Please create an issue if you see any innacuracies in the content.
basics - Creates a simple bundle by taking a file from source and bundling it to a static content folder
module bundling - Demonstrates how Webpack crawls the dependency graph and can bundle multiple JS files into a single target
task running - Consists of a basic React app where we use Webpack to transpile the jsx code, bundle all dependencies (3rd party and our own), and minify the code with plugins
code splitting - Splits the app code into multiple output bundles by chunking the dependencies into separate app and vendor JS files
Inside each app folder, run the following:
npm install
npm run buildAfter Webpack finishes building, open up the public/index.html file in a browser to see the console or rendered output.
The deck is broken down as follows:
- Benefits of task runners and bundlers
- Sample app walkthroughs
- Key takeaways for new React developers
- Helpful resources to explore Webpack
- Popular Webpack plugins and loaders
For a more detailed explanation of the content and flow of the talk, check out the presentation notes.