Webpack 4 Tutorial

Simple introduction to webpack 4 features.

There are multiple branches in this repository that will walk you through these chapters:

1 - Production and Development

git checkout 1-production-and-development

• How to setup a basic webpack project
• How to run webpack and generate development and production bundles

2 - HTML loader

git checkout 2-html-loader

• How to import .html files and use them in webpack
• How to run your JS bundles inside .html files

3 - Dev server

git checkout 3-dev-server

• How to run webpack in development mode
• How to enable hot-reloading while developing

4 - React

git checkout 4-react

• How to configure webpack to transpile JSX
• How to run a basic React app

5 - Dynamic import

git checkout 5-dynamic-import

• How to resolve webpack imports asynchronously
• How to set up basic chunking

6 - Named Chunks and Prefetch

git checkout 6-named-chunks-and-prefetch

• How to setup named chunks and optimize load time using <link rel="prefetch"/>

7 - Caching and chunk splitting

git checkout 7-caching-and-chunk-splitting

• How to optimize client-side caching and enable vendor chunk splitting