Cornpop456/webpack-workshop-2018

Learning resources for the webpack academy workshop series for 2018

Webpack Academy Courses for Frontend Masters

Code repository for the three Webpack courses recorded in 2018.

Video Courses:

1. Webpack 4 Fundamentals (Slides)
2. Web Performance with Webpack (Slides)
3. Mastering Webpack Plugins (Slides)

Project Setup

This project assumes you have Node.js v8 or greater installed which comes the latest npm v5 or greater installed as well.

Note: Sean uses yarn instead of npm at times in this course. yarn and npm do the same thing, with a slightly different API. npm run dev vs yarn dev npm install webpack-dev-server --save-dev vs yarn add webpack-dev-server

Getting Started

These steps will assume that you have cd'd in your preferred editor to this repositories cloned location.

1. Install dependencies: npm install
2. Enjoy the course!

Tip: Use git checkout BRANCH_NAME -f to jump into a given branch. The -f will force overwriting your local changes.

Contact

• Email: sean.larkin@microsoft.com
• Twitter: @TheLarkInn

Support for the Courses

• Log a Github issue if there's an issue with the code.
• Email: support@frontendmasters.com if you have a general issue with the courses.

There are different branches depending on which course you are going through.

1. Sign up for a GitHub Account (if you don't already have one)
2. Fork this repo
3. Clone your fork
4. In the directory you cloned the repository, run git fetch --all
5. To checkout a branch, use git checkout feature/01-fem-first-script

Webpack 4 Fundamentals Branches

• feature/01-fem-first-script
• feature/03-fem-debug-script
• feature/0310-add-first-config-mode-none
• feature/031-all-module-types
• feature/0311-add-first-plugins
• feature/0312-webpack-dev-server
• feature/04010-composing-configs-webpack-merge
• feature/040101-add-style-loader
• feature/04013-adding-presets
• feature/04014-typescript-preset
• feature/0414-analyze-compress-presets

Web Performance with Webpack Branches

• feature/0415-fixed-presets-bug-sorry-use-this
• feature/0500-code-splitting-example
• feature/0500-code-splitting-example
• feature/0501-code-splitting-large-libs
• feature/0502-not-so-dynamic-code-splitting
• feature/0503-webpack-magic-comments
• feature/0504-webpack-prefetch-preload

Webpack 4 Plugins Branches

• feature/0504-webpack-prefetch-preload
• feature/059-my-first-plugin
• feature/0600-custom-webpack-plugins
• feature/0700-custom-loaders