Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/TheLarkInn/webpack-workshop-2018

Learning resources for the webpack academy workshop series for 2018
https://github.com/TheLarkInn/webpack-workshop-2018

Last synced: 3 months ago
JSON representation

Learning resources for the webpack academy workshop series for 2018

Awesome Lists containing this project

README 

        
# Webpack Academy Courses for Frontend Masters

Code repository for the three Webpack courses recorded in 2018.



## Video Courses:

1. [Webpack 4 Fundamentals](https://frontendmasters.com/courses/webpack-fundamentals/) ([Slides](https://docs.google.com/presentation/d/1hFtMCMo62DgOIc-9OwgaVwPZHwv1cgMELArHcMbXlSI/edit#slide=id.g15e96ef847_0_0))

2. [Web Performance with Webpack](https://frontendmasters.com/courses/performance-webpack/) ([Slides](https://docs.google.com/presentation/d/1FW3GT9Ww1S6SEGu8HAO5eRZUFggfVuFE2ievNCDWVDo/edit?usp=sharing))

3. [Mastering Webpack Plugins](https://frontendmasters.com/courses/webpack-plugins/) ([Slides](https://docs.google.com/presentation/d/1P5f-cK4jlhGQIfPQ_vaYFRWV464kBb5UaUBkfRjBp4Y/edit?usp=sharing))



## Project Setup

This project assumes you have [Node.js v8](http://nodejs.org/) or greater installed which comes

the latest [npm](https://www.npmjs.com/) v5 or greater installed as well. 



> Note: Sean uses [yarn](https://yarnpkg.com/lang/en/) 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: [email protected]

* Twitter: [@TheLarkInn](https://twitter.com/thelarkinn)



## Support for the Courses

* Log a [Github issue](https://github.com/thelarkinn/webpack-workshop-2018/issues) if there's an issue with the code.

* Email: [email protected] if you have a general issue with the courses.



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



1. [Sign up](https://github.com/join) for a GitHub Account (if you don't already have one)

2. [Fork](https://help.github.com/articles/fork-a-repo/) this repo

3. [Clone](https://help.github.com/articles/cloning-a-repository/) 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