elanalynn / webpack-experiment-demo

Demo for an experiment with Webpack, which is a step by step code example with explanatory slides.

webpack-experiment-demo

Demo for an experiment with Webpack, which is a step by step code example with explanatory slides.

Online version of finished app can be found at Online Demo.

Purpose

This is a demonstration for Webpack beginners to learn about module bundlers and how they can improve web development. It's a working application that takes a search query and shows suitable gifs as a result.

Slides

The slides that explain this demonstration can be found here:

• Online Slides
• Slide Sources

Installation (Step by Step)

This repository has six subfolders named step1 to step6. Each step is based one on the other, and progressively demonstrates the main benefits of using Webpack as a module bundler.

To build each step, go into the folder and do the following:

• npm install
• node_modules/webpack/bin/webpack.js
• open index.html in a browser

Step 1

Basic setup without any modules.

Step 2

How to load Javascript modules.

Step 3

Loader concept and Babel as Javascript preprocessor.

Step 4

More Loader details, HTML templates and CSS modules.

Step 5

Static assets and external files.

Step 6

Loading and bundling local libraries.

Further Reading

Please inspect the "Inspirational Sources" of the slides for more information.

License

MIT licensed

Contact

Please tweet me or create a Github issue if you have any questions or remarks.