Webpack tutorial held at Uppsala JS
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Emil Öberg
Emil Öberg 📚 Fixed readme
Latest commit 8cd648f Nov 12, 2016
Permalink
Failed to load latest commit information.
docs 📚 Added link to YouTube Nov 11, 2016
src 🎉 Initial commit Oct 20, 2016
.babelrc 🎉 Initial commit Oct 20, 2016
.gitignore 🎉 Initial commit Oct 20, 2016
README.md 📚 Fixed readme Nov 11, 2016
dev-server.js 🎉 Initial commit Oct 20, 2016
index-template.html 🎉 Initial commit Oct 20, 2016
index.html 🎉 Initial commit Oct 20, 2016
package.json 🎉 Initial commit Oct 20, 2016
webpack.config.js

README.md

#webpack-tutorial

This repo contains what was demonstrated on Uppsala.js, November 3, 2016.

Together we built a Javascript app and explored many parts of Webpack and how we can use Webpack to create production ready code as well as use it to help with our development process.

Tutorial explains:

  • What is Webpack
  • Webpack vs Gulp, Grunt, Browserify, Rollup, NPM Scripts
  • How to create a production ready bundle
  • How to do code splitting
  • How to do dead code elimination
  • How to do tree shaking to remove dead code
  • How to do hot module replacement (HMR)
  • How to do hot/live reload
  • How to use ES6/ES.next/ES2015 code in production with Babel
  • How to load images
  • How to load style (css)
  • ...and more

Video and Slides

YouTube Screenshot

Installation

1. Install

# Clone this repo
git clone https://github.com/emiloberg/webpack-tutorial.git

# Install dependencies
npm install

# Run for development
npm run dev
# go to http://localhost:8080

# Run for production
npm run build

Links

Things in the presentation

State of Javascript


Webpack

Webpack Dev Server

Plugins

Loaders

More things to read

Contact

Feel free to contact me:

// Emil Oberg