Function

Here is how webpack works?

This document is only a overview. It may not features all steps of webpack.

Syntax

+ Some kind of data
| Some kind of action
|> Some kind of call action, see other pseudo code fragment
=== Some kind of loop/conditional

I may draw some pictures soon...

Overview

main(entry module)
 
| fill default options
=== if options.watch
  | create cache if not provided
  === on file change, on "invalid" event
    | emit "bundle-invalid" event
    |> build()
|> build()

build(entry module)

|> build-dependency-tree()
+ depTree
=== foreach chunk in depTree
  | add content to hash
  | write chunk template
  |> write-chunk-content()
  | [if options.minimize] minimize file
  | add file to emitted files
| emit "start-writing" event
=== if not options.noWrite
  | create output directory if not existing
  | write out emitted files
| create stats object
| emit "bundle" event and call callback

build-dependency-tree(entry module)

| init depTree
+ depTree
|> add-module(entry module)
|> create-chunk(entry module)
| create ids for modules
=== foreach chunk in depTree
  | remove modules that are in all parent chunks
  | [if empty] remove chunk
  | [if same as other chunk] remove chunk
| create ids for chunks
| return depTree

Add module

add-module(module)

+ require string, context
|> resolve(require string)
+ loaders, filename
=== if module exists in depTree
  | add require reason
  | return module.id
| create module in depTree
=== if module is not in cache or invalid
  | read file
  + file content
  | match pre and post loaders
  |> resolve(pre and post loaders)
  + pre and post loaders filenames
  |> execute-loaders(pre loaders)
  |> execute-loaders(loaders)
  |> execute-loaders(post loaders)
  + js result
  |> parse(js result)
  | [if options.cache] store to cache
+ js content, requires, async contexts
|> foreach require in requires: add-module(require)
|> foreach require.context in requires: add-context-module(content)
+ js content
| return module.id;

resolve

resolve(context, identifier)

| split identifier at "!"
+ loaders, resource
|> resolveItem(context, resource)
| [if identifier not contains "!"] match and set default loaders
|> foreach loader in loaders: resolveItem(context, loader)
| join resolved loaders and resolved resource
| foreach preprocessor in preprocessors: exec preprocessor
| return result

resolveItem(context, identifier)

| split context and identifier at '/' or '\\'
=== while identifier[0] in options alias
  | remove identifier[0]
  | unshift splitted alias
=== if identifer begins with a module
  |> load-as-module()
=== else
  | join context with identifier oder use identifier if absolute
  + pathname
  === if it was a require.context
    | fail if pathname is not directory
    | return pathname
  === else
    |> load-as-file-or-directory()

load-as-module()

|> get-paths-and-modules-directory()
+ possible paths
=== foreach path in possible paths (in order)
  === foreach postfix in options.[loader]postfixes (in order)
    | join path + module name + postfix + remaining identifier
    + pathname
    === if it was a require.context
      | fail if pathname is not directory
      | return pathname
    === else
      |> load-as-file-or-directory()