Webpack Incremental Tutorial

Basic and advanced guide for Webpack in an incremental way. It is incremental because there are 8 examples (8 folders). Each has a webpack.config.js and complements the previous tutorial. For example, Example 2 (Minify) complements Example 1 (Basic), and so on.

Installation

git clone https://github.com/Imballinst/webpack-incremental-tutorial
cd webpack-incremental-tutorial
npm install

List of examples and How to Run Them

There are 8 examples (as stated above) in this repository. Run these commands on your root directory.

1. Basic - Complete Asset Loaders: npm run build:1
2. Advanced - Minify Assets: npm run build:2
3. Advanced - Hash: npm run build:3
4. Advanced - Code Splitting: npm run build:4
5. Advanced - Build Performance: npm run build:5
6. Advanced - Vendor Assets Filtering: npm run build:6
7. Advanced - Tree Shaking: npm run build:7
8. Advanced - Conditional Build: npm run build:8

Additional Scripts

1. Clear cache folder (for example #5 and above): npm run cache:clear

Testing

The test contained in this repository has only one purpose: to make sure that no code is unused or out of context with eslint. To run the test: npm test.

Complete guide

For complete guide, please check Webpack's guides section.