TheLarkInn/artsy-webpack-tour TheLarkInn/artsy-webpack-tour

  • Stars
    star
    524
  • Rank 84,541 (Top 2 %)
  • Language
  • Created almost 8 years ago
  • Updated over 6 years ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
TheLarkInn/artsy-webpack-tour
github

TheLarkInn

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Annotations on webpack source code in a pseudo-guided fashion.

artsy-webpack-tour

Annotations on webpack source code in a pseudo-guided fashion.

Just an Experiment

My goal as one of the maintainers for webpack is being able to help developers better understand how webpack works.

Demystify the tool so it helps you become more comfortable understanding how to use it and contributing to our source code and supporting packages.

Have a question?

The whole goal is to teach you how to use webpack, therefore please ask questions about the annotations you see inside of a github issue, and I will help you clarify any parts of what is seen below. There is NO wrong question.

Disclaimer: This may not match master!

I will likely not keep this up to date with every change in master on webpack/webpack. Rather, the purpose is to teach how to read and view the flow of the compilation lifecycle through webpack.

Table of Contents

  1. WebpackOptionsApply.js (List of plugins)
  2. WebpackOptionsApply.js (Explanation of Options)
  3. WebpackOptionsApply.js (Native modules)
  4. WebpackOptionsApply.js (Source Map Flavors)
  5. WebpackOptionsApply.js (More module madness!)
  6. WebpackOptionsApply.js (after plugins)
  7. Compiler.js (The Complier's Constructor)
  8. Compiler.js (The Complier's Execution Process)
  9. Compiler.js (The Complier's Execution Process Part 2)
  10. Compiler.js (Compilation prelude)
  11. Compilation.js (Welcome to the compilation)
  12. Compilation.js (Welcome to the compilation)
  13. Compilation.js
  14. Compilation.js (Building chains)
  15. NormalModuleFactory.js
  16. NormalModuleFactory.js
  17. NormalModuleFactory.js
  18. NormalModule.js
  19. Compilation.js (Back to compilation!)
  20. Compilation.js
  21. NormalModule.js
  22. NormalModule.js
  23. Compilation.js
  24. Compilation.js
  25. Compilation.js
  26. Compilation.js
  27. Compiler.js
  28. Compilation.js

Text Transcripts

To make this searchable, the text of each image has been transcribed. The title of each transcript anchors to the respective image. The transcripts are not made to be read through, rather they provide a tool to search out a specific section based on the commentary.

Help Wanted β€πŸ˜πŸ’•β€πŸ˜πŸ’•β€πŸ˜πŸ’•β€πŸ˜πŸ’•β€πŸ˜

Version (webpack 2.2.1+ from master)

WebpackOptionsApply.js (List of plugins)

Step 1

  • "All plugins for options cases"
  • "These handle any module format"

WebpackOptionsApply.js (Explanation of Options)

Step 2

  • "getting opts from config"
  • "options target code"
  • "ES5 OOP (class W0A(?) extends 0A)"
  • "records"
  • "never used this before Β―\(ツ)/Β― "
  • "plugin system makes for extremely flexible feature development"

WebpackOptionsApply.js (Native modules)

Step 3

  • "Certain targets ship w/ other modules native to their deploy target like Electron"
  • "Similar to electron man but instead the "client" side. Thus diff externals"

WebpackOptionsApply.js (Source Map Flavors)

Step 4

  • "handling bad target values"
  • "all of this logic is for the 'devtool' prop. Allows for about 15-20 flavors of source maps"
  • "That was Sean's first ever PR!!!"

WebpackOptionsApply.js (More module madness!)

Step 5

  • "1. Single plugin for entry prop that is registered then"
  • "2. Executes via subsequent event"
  • "these plugins are grouped b/c they are all for module interop"
  • "these plugins all pertain to general optimizations including tree shaking"
  • "performance budgets code"
  • "in version 1, you had to do this yourself, now in v2 we handle it"

WebpackOptionsApply.js (after plugins)

Step 6

  • "nice for custom plugins that need to execute after all other default plugins"
  • "same as abover except after resolvers are created"
  • "saftey net incase someone nulls the input fs"
  • "(Also resolvers are created here. The factory comes from webpack/enhanced-resolve)"

Compiler.js (The Complier's Constructor)

Step 7

  • "The Compiler"
  • "yes, you can set your own custom file system"
  • "depreceate where the parser used to live"
  • "options from your config will end up here"
  • "Constructor"

Compiler.js (The Complier's Execution Process)

Step 8

  • "top lvl. function for entire webpack compliation process"
  • "timings for builds"
  • "here are all of the compiler's plugin events"
  • "all plugin events start with 'applyPlugins'"
  • "that means you can write custom plugins for any of these events"
  • "still track time till the end"

Compiler.js (The Complier's Execution Process Part 2)

Step 9

  • "next step in process (called inside of .run)"
  • "compilation is being created"
  • "create info to init compliation"
  • "the compilation plugins are firing"

Compiler.js (Compilation prelude)

Step 10

  • "we drive into the compilation next"
  • "used for long term hashing"
  • "lets you plugin to multiple child compilations vs. just the parent"
  • "we create modules from here"

Compilation.js (Welcome to the compilation)

Step 11

  • "plugin system"
  • "compiler thaty created it"
  • "Templates: bind the dep. graph to actual output code."
  • "the literal constructor for each dep."
  • "the shape of these templates vary by the type of dependency"

SingleEntryPlugin.js (Down the rabbit hole!)

Step 12

  • "The plugins start to take over!!"
  • "there's one of those dep. types I was talking about"
  • "that's the values from your entry property"
  • "back to the compilation to start walking the dependency graph"

Compilation.js

Step 13

  • "open empty slot for chunk about to be created"
  • "this is the module that will be resolved"
  • "it wasn't originated from another module, so set null"
  • "next fn to visit :)"

Compilation.js (Building chains)

Step 14

  • "track time to build chain"
  • "if 'bail:true', explode"
  • "else build anyways, show error after"
  • "safety net so deps are created properly"
  • "tip: depfactory.create = module"
  • "the dir path it came from"
  • "why an array? think nodes on a graph and dependencies are all adjacent nodes"
  • "a module is created: passed to callback!!"
  • "more timing"
  • "module officially added to compilation"
  • "Can also be null?"
  • "finish early if so"
  • "if a module is returned, use it and flag ready"
  • "I smell some recursion coming up!!!!"

NormalModuleFactory.js

Step 15

  • "see if there is a cache entry first"
  • "allows plugins to hijack and modify original 'request' obj."
  • "IE: NormalReplacementPlugin"
  • "cache"
  • "return resolved module"

NormalModuleFactory.js

Step 16

  • "this gets triggered from .creal"
  • "resolver event triggered & assigned"
  • "resolver is now going to ensure that the module you requested actually exists"
  • "don't error, skip"
  • "the result returned has everything needed to create module"
  • "will visit here next"
  • "more on this stuff later"
  • "the NormalModule instance is finally created"
  • "event for plugins to use"
  • "send module back to be added to chunk"

NormalModuleFactory.js

Step 17

  • "as you can see callback handles resolved requests"
  • "find & extract loaders being used in require()"
  • "new code for handling ident in loader opts. "
  • "Rules are normalized from configuration"
  • "find all pre & post loaders"
  • "paths to loaders are now resolved"
  • "always ordered post-normal-pre"

NormalModule.js

Step 18

  • "We are arriving here from the NormalModuleFactory"
  • "Parser instance"
  • "path the user specifies"
  • "path before query etc, are parsed"
  • "loaders to be applied"
  • "dependencies for context modules (superclass owns this.dependencies)"
  • "Normal Module constructor"
  • "extends module"

Compilation.js (Back to compilation!)

Step 19

  • "just finished time for the callback"
  • "this new Normal Module"
  • "fails if factory fails "
  • "timing/profiling"
  • "check cache and profile"
  • "next stop"
  • "next stop+1"
  • "find deps of module to go through resolve, vreate, build process cycle till graph is complete"

Compilation.js

Step 20

  • "Up until now, we know the following about our entry module:
    " β€’ request path
    -loaders assigned and applied
    -source value in new"
  • "we venture back to the callback"
  • "collect mod, and dep diagnostics, report the to compilation as errors"
  • "last chance for plugins to modify the NormalModule obj"
  • "Same as above for warning separately"
  • "Let plugins handle post build events"
  • "stable(?) topological ped sort. see compareLocations.j"

NormalModule.js

Step 21

  • "timings"
  • "1. yet another callback πŸ’•"
  • "Really important to remember that once inside this block, loaders have finally been applied"
  • "2. see if noParse is set if so, don't send to parser"
  • "3. pass raw src to parser along w/ options"
  • "4. if loaders are used correctly, the final loader will return js that acorn can parse, else FAIL! "

NormalModule.js

Step 22

  • "still here"
  • "a value ref. later for Loaders."
  • "1. What is loaderContext? The loader contect rep. is also known as the Loader API. It is a collection of utilities and stateful info about the current module being loaded"
  • "1a. loader context"
  • "Finally!! Loaders are ran!!"
  • "2. This fin actually comes from a supporting npm module: loader-runner."
  • "loaders can specify deps of their own declaratively"
  • "like css => background img"
  • "css-loader => url loader"
  • "2a. loader runner"
  • "3. can also return a buffer"
  • "4. if supported loader sends back src maps."
  • "5. remember last sketch? we send back to be parsed"

Compilation.js

Step 23

  • "We've already covered this tl;dr caching"
  • "finally back 2 levels up of callbacks"
  • "?=unresolved"
  • "oh hey no context switching <3"
  • "timing & profile"
  • "the next step in building the dep graph"
  • "right now at this point we only have 1 module"

Compilation.js

Step 24

"for now, lets consider this the entry module."
"the final call from addEntry fn"
"unflatten deps"
"deps. can come from some 'resourece' aka file/resolved location, this dedupes the loc. and groups by [[dep1, dep2],...[block],...]"
"hard to explain; 100% a module is a dep block dep block is hisgest super class that exists to rep. dep. relationships"
"time to add all deps & bfs graph traversal"
"OMG I JUST Figureed out DependenciesBlock fully just now!!!"
"So the whole point is that deps can be uniq bit from the same place"

Compilation.js

Step 25

  • "profiling"
  • "since we've gone to a signle entry dep to now an arrau pf deps we'll need to iterate through them"
  • "i can haz functional error handling?"
  • "by calling create"
  • "now we async iterate through all deps and process them w/ their dep factory"
  • "warnings & error handlers"
  • "Already learned this fun stuff"
  • "tie deps back to origin modules (2 way ref.)"
  • "profile pt1"
  • "end of 1 way traversal"
  • "cache checks"

Compilation.js

Step 26

  • "some profiling + ?"
  • "recursion begins"
  • "remember we are still inside async factory iterator also."
  • "recurse the graph!"
  • "we can actually go back to original event"
  • "finally traversal is complete"

Compiler.js

Step 27

  • "Brain Recapitulation!!!!"
  • "We just spent like 5 hours in Compilation, but the graph is done building and now we are back"
  • "this is where we last left off"
  • "finish & seal are next to be called..."

Compilation.js

Step 28

  • "lets dive in to here"
  • "warnings & errors"
  • "triggered here yay!"

More Repositories

1

webpack-workshop-2018

Learning resources for the webpack academy workshop series for 2018
554
star
2

webpack-developer-kit

webpack dev kit for writing custom plugins and loaders on the fly. Education/Exploration tool as well.
JavaScript
224
star
3

unity-component-specification

This is a WIP draft of the Unity (Single File Web Component) Specification
217
star
4

angular2-template-loader

Chain-to loader for webpack that inlines all html and style's in angular2 components.
JavaScript
206
star
5

bundle-buddy-webpack-plugin

🐐🐐🐐🐐 bundle-buddy-webpack-plugin 🐐🐐🐐🐐
JavaScript
195
star
6

everything-is-a-plugin

Everything is a Plugin: Mastering webpack from the inside out. NgConf 2017
JavaScript
144
star
7

compare-webpack-target-bundles

Example of all the webpack targets!!! Webpack Playground!
JavaScript
140
star
8

angular-starter-es6-webpack

This is an Angular Starter App with component and service generators using gulp for easy component development. Uses Karma-Mocha-Chai as testing suite and Babel Loader and Webpack for ES6
JavaScript
106
star
9

LazyParseWebpackPlugin

(v8-lazy-parse-webpack-plugin) This is a webpack plugin designed to exploit the V8 engines treatment of functions with parens wrapped around them. This lazy loads the parsing decreasing initial load time.
JavaScript
104
star
10

bundler-performance-benchmark

This is a super tiny example of a transparent comparison between parcel and webpack and anyone else who wants to be involved.
JavaScript
61
star
11

angular2-webpack-lite

Super lite boilerplate of Angular2 with Webpack and Typescript.
TypeScript
43
star
12

js-parser-discussions

Discussions & Collaboration on a Unified/Base set of parser features for JavaScript
42
star
13

virtual-dependency-loader

webpack loader that takes a single file, and declare pieces of that file as "dependencies" as if it existed.
JavaScript
33
star
14

code-splitting-examples

VueJs and webpack Code Splitting Examples
JavaScript
28
star
15

vscode-webpack-extension

VSCode Extention Demo for webpack
JavaScript
23
star
16

simple-webpack-wasm-example

Very alpha alpha example of webpack WASM support (just build output) for JS Engine Teams to look at
JavaScript
20
star
17

vue-d3

A fun experimental learning project where I learn how to use d3 while leveraging the power of VueJS
JavaScript
18
star
18

webpack-academy-starting-out-right

This is the starter github repo from https://webpack.academy/p/web-fundamentals
JavaScript
16
star
19

ngc-loader

Webpack support for the Angular2 offline compiler.
TypeScript
13
star
20

example-webpack-loader

A extremely barebones webpack loader example that conforms to our webpack-defaults repo standards
JavaScript
12
star
21

is-wsl

Check if the process is running inside Windows Subsystem for Linux (Bash on Windows)
Rust
10
star
22

prepack-webpack-plugin

Using prepack on your webpack bundles?
9
star
23

npm-package

A lightweight client for fetching package metadata from the npm registry
Rust
9
star
24

require-id-webpack-plugin

A webpack plugin that decorates `require` to a return module id's.
JavaScript
8
star
25

angular2-multievent-bindings-plugin

A small plugin that allows for binding multiple events into an Angular2 template.
TypeScript
7
star
26

example-vscode-bundled-extension

This is a super small and primitive example of a vscode extension being bundled with webpack for faster load and install times.
JavaScript
7
star
27

mersenne-twister-es

A JavaScript Implementation of MersenneTwiseter writting with ES Modules
JavaScript
7
star
28

AnalyticsWebpackPlugin

Plugin using GA to Report Webpack Statistics
JavaScript
5
star
29

webpack-v4-example

Test project that has webpack v4 linked against it. For personal use.
JavaScript
5
star
30

is-docker

Checks if the process is running inside a Docker container. Rust implementation of `sindresorhus/is-docker`
Rust
4
star
31

threeve

Texas with a dollar sign. Component library for VueJs and ThreeJs [WIP DONT USE]
JavaScript
4
star
32

is-interactive

Rust adaptation of sindresorhus/is-interactive from NodeJS
Rust
4
star
33

puppeteer-webpack-plugin

webpack Plugin for running scripts and tests using the Puppeteer Chrome Remote Protocol API
4
star
34

ansi-regex

A rust implementation of @microsoft/node-core-library's ansi regex detection
Rust
3
star
35

is-unicode-supported

Detect whether the terminal supports unicode or not.
Rust
3
star
36

sonar-webpack-plugin

😊😘😍
3
star
37

strip-ansi

Rust inspired implementation of chalk/strip-ansi.
Rust
3
star
38

has-flag

A rust implementation of sindresorhus/has-flag
Rust
2
star
39

experiment-0001

Experiment Number 0001
2
star
40

krate

Get a Rust crates metadata and release information.
Rust
2
star
41

bcmarinacci.theme-material-operator-1.3.0

2
star
42

webpack-stress-test

Stupid simple example repo that helps highlight some build time lengthiness (lots of modules)
JavaScript
2
star
43

webpack-context-modules

Tiny example of using webpack context modules
2
star
44

moo-angular-accordion

AngularJS Directive Component of the UI-Toolkit's Accordion for Mutual of Omaha's DXD Team
JavaScript
1
star
45

ngconf-webpack-wall-of-awesome

This is the code for the Webpack wall of awesomeness!!!
JavaScript
1
star
46

proposal-dot-last

`.last()` proposal for JavaScript
1
star
47

angular-compiler-plugin

Angular Webpack Compiler Plugin for Angular Offline compiler and code generation.
TypeScript
1
star
48

repro-parcel-112

This is a simple repro repo for ParcelJS Issue 112
HTML
1
star
49

sonar-loader

πŸ™ŒπŸ€£πŸ˜πŸ’•β€πŸ˜‚πŸŽΆπŸ€žβœŒπŸ˜ŽπŸ’–πŸŒΉπŸ’‹ Loader for webpack! Get Hyped.
1
star
50

iPortfolio

An iOS App about my engineering background
Objective-C
1
star
51

angular-webpack-slides-ngconf-2016

Slides for Angular2 + Webpack <3 Presentation for ng-conf2016
JavaScript
1
star
52

string_formatted_date

A simple gem for easy date formatting!
Ruby
1
star
53

typescript-alias-webpack-plugin

This is a typescript webpack plugin that automatically maps `paths` property to webpack's `resolve.alias`
1
star