thelarkinn / webpack-workshop-2018 Goto Github PK

View Code? Open in Web Editor NEW

550.0 550.0 997.0 3.04 MB

Learning resources for the webpack academy workshop series for 2018

License: MIT License

webpack-workshop-2018's Introduction

Webpack Academy Courses for Frontend Masters

Code repository for the three Webpack courses recorded in 2018.

Video Courses:

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.

Install dependencies: npm install
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

Support for the Courses

Log a Github issue 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.

Sign up for a GitHub Account (if you don't already have one)
Fork this repo
Clone your fork
In the directory you cloned the repository, run git fetch --all
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

webpack-workshop-2018's People

Contributors

Stargazers

Watchers

Forkers

4141done chiefincommand sliultron alpo22 ddlbrena iflameing leonardofaria kopasetik kusog jnewton-avvo jaredevantabor thomabr nagarajusaripally simbathesailor misterdev rwalter88 nihique kripple jjcarey stmarler joncaris gauntik tamra-oneil swamykottur billsheldon-hunterindustries llnagy gmarkc mak006 ganesha30 mlbcodes eppsilon7 rupamroy moravcik tareqx2 mgaffin jeremydoss nmvo clittell brspence codedbyelvis jlowery457 juanyifeng pauljeter srazzack benjarmil vaduveerappan lelong37 rezarr jayharvey iambalaam mvollebregt outcan davidalekna bhavneetsoni99 correasebastian fidalgok aashishnagpal alfcs-dev erikiva anchnk hardikyjoshi street-lit kaltepeter ddaza bharney waruiz qode-zeus eonarheim santhoshraju91 dnunn1 bobcahill joekimgp madriver44 glongh haslam markat1 patlolla-sai-charan-reddy opagani kolldavi hankandre modsartawi rupeshdabbir jevinanderson jaykan sairamnutheti vsuryawanshi hedgeday lalitha-iyer abdelrahman1 whookam lerex wotway84 daniel-234 smakys focus3d username255 timneutkens gmartellino vedantb chrissaravillo

webpack-workshop-2018's Issues

Remove extra branch by fixing previous branches

Why do you have the branch 0415-fixed-presets-bug-sorry-use-this? Can we remove this and just patch the previous branches if needed?

Server side rendering with webpack

Hi! Wanted to share my Idea(didnt know where to discuss this topic, sry for sopam in task). What do you think if pages what dont need auth for access would be serverd prerenderd and by server(user will get html/css ). on background we will pre download scripts without executing them. If user will start interacting with page any further work will be managed on user side rendering. It would lead to instantly loading index page and some others. ?

Failed at the [email protected] build script.

Hi, im using mac and have 2 questions:

1.- when i run the first "npm install" all the dependencies are created in a new file called "package-lock.json"

2.- so when i follow the instructions and run the "npm run webpack" i get this error:

sh: webpack: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! [email protected] build: webpack
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/diseno/.npm/_logs/2019-11-18T18_26_37_556Z-debug.log

npm install failed

running npm install prints out "Cannot read property 'match' of undefined"

17 silly saveTree │ ├─┬ [email protected]
17 silly saveTree │ │ └── [email protected]
17 silly saveTree │ └── [email protected]
17 silly saveTree ├─┬ [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├─┬ [email protected]
17 silly saveTree │ │ └─┬ [email protected]
17 silly saveTree │ │   ├── [email protected]
17 silly saveTree │ │   └─┬ [email protected]
17 silly saveTree │ │     └── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├─┬ [email protected]
17 silly saveTree │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ └── [email protected]
17 silly saveTree │ │ └── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ └── [email protected]
17 silly saveTree ├─┬ [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├─┬ [email protected]
17 silly saveTree │ │ ├── [email protected]
17 silly saveTree │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ └── [email protected]
17 silly saveTree │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ └── [email protected]
17 silly saveTree │ │ ├── [email protected]
17 silly saveTree │ │ └─┬ [email protected]
17 silly saveTree │ │   ├── [email protected]
17 silly saveTree │ │   └── [email protected]
17 silly saveTree │ ├─┬ [email protected]
17 silly saveTree │ │ └── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├─┬ [email protected]
17 silly saveTree │ │ ├── [email protected]
17 silly saveTree │ │ └── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├─┬ [email protected]
17 silly saveTree │ │ └── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├─┬ [email protected]
17 silly saveTree │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ └── [email protected]
17 silly saveTree │ │ └── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ └── [email protected]
17 silly saveTree ├── [email protected]
17 silly saveTree ├─┬ [email protected]
17 silly saveTree │ ├─┬ [email protected]
17 silly saveTree │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ ├── [email protected]
17 silly saveTree │ │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ │ └── [email protected]
17 silly saveTree │ │ │ └── [email protected]
17 silly saveTree │ │ └── [email protected]
17 silly saveTree │ ├─┬ [email protected]
17 silly saveTree │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ │ ├── [email protected]
17 silly saveTree │ │ │ │ ├── [email protected]
17 silly saveTree │ │ │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ │ │ ├── [email protected]
17 silly saveTree │ │ │ │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ │ │ │ └── [email protected]
17 silly saveTree │ │ │ │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ │ │ │ ├── [email protected]
17 silly saveTree │ │ │ │ │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ │ │ │ │ └─┬ [email protected]
17 silly saveTree │ │ │ │ │ │ │   └── [email protected]
17 silly saveTree │ │ │ │ │ │ └── [email protected]
17 silly saveTree │ │ │ │ │ ├── [email protected]
17 silly saveTree │ │ │ │ │ └── [email protected]
17 silly saveTree │ │ │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ │ │ └─┬ [email protected]
17 silly saveTree │ │ │ │ │   ├─┬ [email protected]
17 silly saveTree │ │ │ │ │   │ └── [email protected]
17 silly saveTree │ │ │ │ │   ├── [email protected]
17 silly saveTree │ │ │ │ │   └── [email protected]
17 silly saveTree │ │ │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ │ │ ├── [email protected]
17 silly saveTree │ │ │ │ │ └─┬ [email protected]
17 silly saveTree │ │ │ │ │   └── [email protected]
17 silly saveTree │ │ │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ │ │ │ └─┬ [email protected]
17 silly saveTree │ │ │ │ │ │   ├── [email protected]
17 silly saveTree │ │ │ │ │ │   └── [email protected]
17 silly saveTree │ │ │ │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ │ │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ │ │ │ │ └── [email protected]
17 silly saveTree │ │ │ │ │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ │ │ │ │ └─┬ [email protected]
17 silly saveTree │ │ │ │ │ │ │   ├─┬ [email protected]
17 silly saveTree │ │ │ │ │ │ │   │ └── [email protected]
17 silly saveTree │ │ │ │ │ │ │   ├─┬ [email protected]
17 silly saveTree │ │ │ │ │ │ │   │ └── [email protected]
17 silly saveTree │ │ │ │ │ │ │   └── [email protected]
17 silly saveTree │ │ │ │ │ │ ├── [email protected]
17 silly saveTree │ │ │ │ │ │ ├── [email protected]
17 silly saveTree │ │ │ │ │ │ └── [email protected]
17 silly saveTree │ │ │ │ │ ├── [email protected]
17 silly saveTree │ │ │ │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ │ │ │ └── [email protected]
17 silly saveTree │ │ │ │ │ └── [email protected]
17 silly saveTree │ │ │ │ ├── [email protected]
17 silly saveTree │ │ │ │ ├── [email protected]
17 silly saveTree │ │ │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ │ │ ├── [email protected]
17 silly saveTree │ │ │ │ │ └── [email protected]
17 silly saveTree │ │ │ │ ├── [email protected]
17 silly saveTree │ │ │ │ └── [email protected]
17 silly saveTree │ │ │ └─┬ [email protected]
17 silly saveTree │ │ │   └── [email protected]
17 silly saveTree │ │ ├── [email protected]
17 silly saveTree │ │ ├── [email protected]
17 silly saveTree │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ ├── [email protected]
17 silly saveTree │ │ │ └─┬ [email protected]
17 silly saveTree │ │ │   ├── [email protected]
17 silly saveTree │ │ │   ├─┬ [email protected]
17 silly saveTree │ │ │   │ └── [email protected]
17 silly saveTree │ │ │   ├─┬ [email protected]
17 silly saveTree │ │ │   │ ├─┬ [email protected]
17 silly saveTree │ │ │   │ │ └── [email protected]
17 silly saveTree │ │ │   │ ├─┬ [email protected]
17 silly saveTree │ │ │   │ │ └── [email protected]
17 silly saveTree │ │ │   │ └── [email protected]
17 silly saveTree │ │ │   ├─┬ [email protected]
17 silly saveTree │ │ │   │ ├── [email protected]
17 silly saveTree │ │ │   │ └─┬ [email protected]
17 silly saveTree │ │ │   │   ├── [email protected]
17 silly saveTree │ │ │   │   └── [email protected]
17 silly saveTree │ │ │   ├─┬ [email protected]
17 silly saveTree │ │ │   │ ├─┬ [email protected]
17 silly saveTree │ │ │   │ │ └─┬ [email protected]
17 silly saveTree │ │ │   │ │   └─┬ [email protected]
17 silly saveTree │ │ │   │ │     ├── [email protected]
17 silly saveTree │ │ │   │ │     └── [email protected]
17 silly saveTree │ │ │   │ └── [email protected]
17 silly saveTree │ │ │   ├─┬ [email protected]
17 silly saveTree │ │ │   │ ├─┬ [email protected]
17 silly saveTree │ │ │   │ │ ├── [email protected]
17 silly saveTree │ │ │   │ │ └─┬ [email protected]
17 silly saveTree │ │ │   │ │   ├── [email protected]
17 silly saveTree │ │ │   │ │   ├── [email protected]
17 silly saveTree │ │ │   │ │   ├── [email protected]
17 silly saveTree │ │ │   │ │   ├── [email protected]
17 silly saveTree │ │ │   │ │   ├── [email protected]
17 silly saveTree │ │ │   │ │   ├── [email protected]
17 silly saveTree │ │ │   │ │   └── [email protected]
17 silly saveTree │ │ │   │ ├── [email protected]
17 silly saveTree │ │ │   │ ├─┬ [email protected]
17 silly saveTree │ │ │   │ │ ├── [email protected]
17 silly saveTree │ │ │   │ │ ├── [email protected]
17 silly saveTree │ │ │   │ │ ├── [email protected]
17 silly saveTree │ │ │   │ │ ├── [email protected]
17 silly saveTree │ │ │   │ │ ├─┬ [email protected]
17 silly saveTree │ │ │   │ │ │ ├── [email protected]
17 silly saveTree │ │ │   │ │ │ ├─┬ [email protected]
17 silly saveTree │ │ │   │ │ │ │ └── [email protected]
17 silly saveTree │ │ │   │ │ │ └─┬ [email protected]
17 silly saveTree │ │ │   │ │ │   └── [email protected]
17 silly saveTree │ │ │   │ │ ├── [email protected]
17 silly saveTree │ │ │   │ │ └── [email protected]
17 silly saveTree │ │ │   │ └── [email protected]
17 silly saveTree │ │ │   ├─┬ [email protected]
17 silly saveTree │ │ │   │ ├── [email protected]
17 silly saveTree │ │ │   │ ├── [email protected]
17 silly saveTree │ │ │   │ ├── [email protected]
17 silly saveTree │ │ │   │ └── [email protected]
17 silly saveTree │ │ │   ├─┬ [email protected]
17 silly saveTree │ │ │   │ └─┬ [email protected]
17 silly saveTree │ │ │   │   ├── [email protected]
17 silly saveTree │ │ │   │   ├─┬ [email protected]
17 silly saveTree │ │ │   │   │ ├─┬ [email protected]
17 silly saveTree │ │ │   │   │ │ └── [email protected]
17 silly saveTree │ │ │   │   │ └── [email protected]
17 silly saveTree │ │ │   │   ├── [email protected]
17 silly saveTree │ │ │   │   └── [email protected]
17 silly saveTree │ │ │   ├── [email protected]
17 silly saveTree │ │ │   └─┬ [email protected]
17 silly saveTree │ │ │     ├── [email protected]
17 silly saveTree │ │ │     ├─┬ [email protected]
17 silly saveTree │ │ │     │ └─┬ [email protected]
17 silly saveTree │ │ │     │   └── [email protected]
17 silly saveTree │ │ │     ├── [email protected]
17 silly saveTree │ │ │     ├── [email protected]
17 silly saveTree │ │ │     └── [email protected]
17 silly saveTree │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ │ └── [email protected]
17 silly saveTree │ │ │ └── [email protected]
17 silly saveTree │ │ ├── [email protected]
17 silly saveTree │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ └── [email protected]
17 silly saveTree │ │ ├── [email protected]
17 silly saveTree │ │ ├── [email protected]
17 silly saveTree │ │ └─┬ [email protected]
17 silly saveTree │ │   ├── [email protected]
17 silly saveTree │ │   └─┬ [email protected]
17 silly saveTree │ │     ├── [email protected]
17 silly saveTree │ │     ├── [email protected]
17 silly saveTree │ │     └── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ └─┬ [email protected]
17 silly saveTree │   └─┬ [email protected]
17 silly saveTree │     ├── [email protected]
17 silly saveTree │     └── [email protected]
17 silly saveTree ├─┬ [email protected]
17 silly saveTree │ ├─┬ [email protected]
17 silly saveTree │ │ └─┬ [email protected]
17 silly saveTree │ │   ├── [email protected]
17 silly saveTree │ │   └── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├─┬ [email protected]
17 silly saveTree │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ └─┬ [email protected]
17 silly saveTree │ │ │   └── [email protected]
17 silly saveTree │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ └── [email protected]
17 silly saveTree │ │ ├── [email protected]
17 silly saveTree │ │ ├── [email protected]
17 silly saveTree │ │ ├── [email protected]
17 silly saveTree │ │ └── [email protected]
17 silly saveTree │ └── [email protected]
17 silly saveTree ├─┬ [email protected]
17 silly saveTree │ ├─┬ [email protected]
17 silly saveTree │ │ ├── [email protected]
17 silly saveTree │ │ └── [email protected]
17 silly saveTree │ └─┬ [email protected]
17 silly saveTree │   └─┬ [email protected]
17 silly saveTree │     ├─┬ [email protected]
17 silly saveTree │     │ ├── [email protected]
17 silly saveTree │     │ ├── [email protected]
17 silly saveTree │     │ ├─┬ [email protected]
17 silly saveTree │     │ │ ├─┬ [email protected]
17 silly saveTree │     │ │ │ ├── [email protected]
17 silly saveTree │     │ │ │ └── [email protected]
17 silly saveTree │     │ │ └── [email protected]
17 silly saveTree │     │ └── [email protected]
17 silly saveTree │     ├── [email protected]
17 silly saveTree │     └─┬ [email protected]
17 silly saveTree │       ├── [email protected]
17 silly saveTree │       ├── [email protected]
17 silly saveTree │       └── [email protected]
17 silly saveTree ├─┬ [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├─┬ [email protected]
17 silly saveTree │ │ └── [email protected]
17 silly saveTree │ ├─┬ [email protected]
17 silly saveTree │ │ ├── [email protected]
17 silly saveTree │ │ ├─┬ [email protected]
17 silly saveTree │ │ │ └── [email protected]
17 silly saveTree │ │ └── [email protected]
17 silly saveTree │ ├── [email protected]
17 silly saveTree │ ├─┬ [email protected]
17 silly saveTree │ │ └── [email protected]
17 silly saveTree │ └─┬ [email protected]
17 silly saveTree │   ├── [email protected]
17 silly saveTree │   └─┬ [email protected]
17 silly saveTree │     └── [email protected]
17 silly saveTree ├─┬ [email protected]
17 silly saveTree │ ├─┬ [email protected]
17 silly saveTree │ │ ├── [email protected]
17 silly saveTree │ │ └── [email protected]
17 silly saveTree │ └─┬ [email protected]
17 silly saveTree │   ├── [email protected]
17 silly saveTree │   ├── [email protected]
17 silly saveTree │   └─┬ [email protected]
17 silly saveTree │     ├── [email protected]
17 silly saveTree │     ├── [email protected]
17 silly saveTree │     └── [email protected]
17 silly saveTree └─┬ [email protected]
17 silly saveTree   ├─┬ [email protected]
17 silly saveTree   │ ├─┬ [email protected]
17 silly saveTree   │ │ ├─┬ [email protected]
17 silly saveTree   │ │ │ └─┬ [email protected]
17 silly saveTree   │ │ │   └─┬ [email protected]
17 silly saveTree   │ │ │     └── [email protected]
17 silly saveTree   │ │ ├── [email protected]
17 silly saveTree   │ │ ├─┬ [email protected]
17 silly saveTree   │ │ │ ├── [email protected]
17 silly saveTree   │ │ │ └── [email protected]
17 silly saveTree   │ │ └─┬ [email protected]
17 silly saveTree   │ │   ├─┬ [email protected]
17 silly saveTree   │ │   │ └── [email protected]
17 silly saveTree   │ │   └── [email protected]
17 silly saveTree   │ └─┬ [email protected]
17 silly saveTree   │   └── [email protected]
17 silly saveTree   └── [email protected]
18 verbose stack TypeError: Cannot read property 'match' of undefined
18 verbose stack     at tarballToVersion (/usr/local/lib/node_modules/npm/lib/install/inflate-shrinkwrap.js:87:20)
18 verbose stack     at inflatableChild (/usr/local/lib/node_modules/npm/lib/install/inflate-shrinkwrap.js:99:22)
18 verbose stack     at /usr/local/lib/node_modules/npm/lib/install/inflate-shrinkwrap.js:55:12
18 verbose stack     at tryCatcher (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/util.js:16:23)
18 verbose stack     at Object.gotValue (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/reduce.js:155:18)
18 verbose stack     at Object.gotAccum (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/reduce.js:144:25)
18 verbose stack     at Object.tryCatcher (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/util.js:16:23)
18 verbose stack     at Promise._settlePromiseFromHandler (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:517:31)
18 verbose stack     at Promise._settlePromise (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:574:18)
18 verbose stack     at Promise._settlePromise0 (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:619:10)
18 verbose stack     at Promise._settlePromises (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:699:18)
18 verbose stack     at _drainQueueStep (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:138:12)
18 verbose stack     at _drainQueue (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:131:9)
18 verbose stack     at Async._drainQueues (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:147:5)
18 verbose stack     at Immediate.Async.drainQueues [as _onImmediate] (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:17:14)
18 verbose stack     at processImmediate (internal/timers.js:456:21)
19 verbose cwd /Users/yu.wang/Documents/Workspace/webpack-workshop
20 verbose Darwin 19.3.0
21 verbose argv "/usr/local/Cellar/node/14.3.0/bin/node" "/usr/local/bin/npm" "install"
22 verbose node v14.3.0
23 verbose npm  v6.14.4
24 error Cannot read property 'match' of undefined
25 verbose exit [ 1, true ]

module.exports default params issue

@TheLarkInn thanks a lot for the course. It was very useful and your teaching style is amazing. Congratulations.
One question, for some reason in my webpack config file below code didn't work. presets returned undefined

module.exports = ({ mode, presets } = { mode: "production", presets: [] }) => {
but this one did:
module.exports = ({ mode = 'production', presets = [] }) => {
Any ideas?

Thanks

webpack.config.js not getting picked up properly

I'm experiencing an issue where webpack.config.js is not being picked up when running npm run webpack (or yarn webpack) in the branch 03-fem-debug-script. Seems to be caused by both webpack-cli and webpack-command being installed. Removing webpack-command and then doing npm install seems to fix the issue.

I have not completed the full course yet, so not sure if webpack-command is used in anyway later, but otherwise I would suggest to remove it.

Loading multiple presets

In the loading presets lesson, the typescript preset is loaded like this:

npm run prod --env.presets typescript

In case there are multiple presets available and I want to load some of them, how to pass the presets?

For example npm run prod --env.presets typescript compression does not work.

Thank you for the awesome webpack lessons!

webpack --watch is not recompling changed file

I'm currently on branch feature/03-fem-debug-script.

When i change things in the file, webpack is not respond to file changes.
It keep hanging around.

Production build is throwing webpack error

I have same package.json and webpack.config.js file as in Branch : feature/04010-composing-configs-webpack-merge

but when I run yarn prod I get below error
✖ ｢webpack｣: Flags were specified that were not recognized: --env Not sure what you mean there Please check the command executed. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] webpack: webpack "--env.mode" "production"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be foundin:
`
Please find attachment for detailed log of ther error.
However development build {yarn dev} works fine.
2018-07-10T10_25_47_813Z-debug.log

Uncaught TypeError: Cannot read property 'call' of undefined

I thought I made a mistake so I wiped my folder and cloned this repo again, switch to branch feature/0312-webpack-dev-server ran yarn install and then ran yarn dev.

no errors in the terminal, but on the page in the console nothing is happening and the following error appears.

Uncaught TypeError: Cannot read property 'call' of undefined at __webpack_require__ (index.js:20) at eval (index.js:2) at Object../src/index.js (index.js:357) at __webpack_require__ (index.js:20) at eval (webpack:///multi_(:8080/webpack)-dev-server/client?:2:18) at Object.0 (index.js:368) at __webpack_require__ (index.js:20) at index.js:69 at index.js:72

Really hope you can help, as I desperately want to follow along, so far this course has been a life saver.

Treeshaking issue in branch 'feature/031-all-module-types'

Webpack 4 fundamentals
git checkout feature/031-all-module-types

My local environment
~ » node -v
v10.6.0
~ » npm -v
6.1.0

Index.js

import nav from "./nav";
import { top, bottom } from "./footer";
import makeButton from "./button";
import { makeColorStyle } from "./button-styles";

console.log(
  nav(),
  top,
  bottom,
  makeButton("My first button!"),
  makeColorStyle("cyan")
);

button-styles.js

const red = "color: red;";
const blue = "color: blue;";
const makeColorStyle = color => `color: ${color};`;

exports.red = red;
exports.blue = blue;
exports.makeColorStyle = makeColorStyle;

As per the workshop npm run prod should remove red & blue references from the build file as its not used. But its not happening.

~/learning/webpack-workshop-2018(feature/031-all-module-types) » npm run prod -- --display-optimization-bailout

> [email protected] prod /Users/apple/learning/webpack-workshop-2018
> npm run webpack -- --mode production "--display-optimization-bailout"


> [email protected] webpack /Users/apple/learning/webpack-workshop-2018
> webpack "--mode" "production" "--display-optimization-bailout"

Hash: 2e38741249cef67d5b18
Version: webpack 4.16.2
Time: 122ms
Built at: 07/27/2018 7:47:31 AM
  Asset      Size  Chunks             Chunk Names
main.js  1.18 KiB       0  [emitted]  main
[0] ./src/button.js 218 bytes {0} [built]
    ModuleConcatenation bailout: Module is not an ECMAScript module
[1] ./src/button-styles.js 190 bytes {0} [built]
    ModuleConcatenation bailout: Module is not an ECMAScript module
[2] ./src/index.js + 2 modules 359 bytes {0} [built]
    ModuleConcatenation bailout: Cannot concat with ./src/button-styles.js (<- Module is not an ECMAScript module)
    ModuleConcatenation bailout: Cannot concat with ./src/button.js (<- Module is not an ECMAScript module)
    | ./src/index.js 252 bytes [built]
    |     ModuleConcatenation bailout: Module is an entry point
    | ./src/nav.js 28 bytes [built]
    | ./src/footer.js 69 bytes [built]

main.js

!function(e){var t={};function r(o){if(t[o])return t[o].exports;var n=t[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=e,r.c=t,r.d=function(e,t,o){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(o,n,function(t){return e[t]}.bind(null,n));return o},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=2)}([function(e,t){e.exports=(e=>`Button: ${e}`)},function(e,t){t.red="color: red;",t.blue="color: blue;",t.makeColorStyle=(e=>`color: ${e};`)},function(e,t,r){"use strict";r.r(t);var o=r(0),n=r.n(o),u=r(1);console.log("nav","top","bottom",n()("My first button!"),Object(u.makeColorStyle)("cyan"))}]);

Contact Information

Can we use this to share contact information? - here I go

https://www.linkedin.com/in/leonardofariacoelho/

Change in api for webpack-merge

webpack-merge has updated it's api in version 5.x.x. If following along in the course, the npm install would download version 5.x.x, where instead of using default require of webpackMerge it has to be updated to name import merge.

Change const webpackMerge = require("webpack-merge");

To const { merge } = require("webpack-merge");

To keep it similar to how Sean does it in the video, use version 4.x.x

Can't get Typescript preset to work

I cannot get your presets to load. Go to git checkout feature/04013-adding-presets -f and try to add a typescript / ts-loader preset and get it working. It would be great if you could cut a branch of this working, starting with the feature/04013-adding-presets branch.

Having a finished out the typescript preset to give them a branch to reference of it loading would be awesome.

Need Slides broken up according to the 3 courses

We'll need to split the slides up into separate slides for the 3 courses:

Webpack Fundamentals
Instant Loading with Webpack
Mastering Webpack

And update the Readme pointing to the slides for each course.

I updated the title cards for the first two courses.. I'm doing a thorough QA of Instant Loading course now.

Add branch for starting with the webpack-dev-server step

Seems like we need a feature/0311-add-first-plugins branch to start where you're starting to add webpack-dev-server in the course.

I've added a branch I can pull request you from https://github.com/1Marc/webpack-workshop-2018/tree/feature/0311-add-first-plugins if you add that branch.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.