Upgrade to Pro — share decks privately, control downloads, hide ads and more …

webpack 4: Lighting the fire

webpack 4: Lighting the fire

webpack 4: LIGHTING THE FIRE - CODEFEST, RUSSIA 2018

Otemuyiwa Prosper

April 01, 2018
Tweet

More Decks by Otemuyiwa Prosper

Other Decks in Programming

Transcript

  1. “The pain that you’ve been feeling can’t compare to the

    joy webpack 4 brings, @unicodeveloper is lighting the fire #codefestRussia2018” #TweetQuote
  2. #0CJS BUNDLER ⚓ 1. No need to define an entry

    point. 2. No need to define an output. 3. In fact, no need for a config file. Takes src/index.js file as the default entry point. Emits the bundle to dist/main.js file by default.
  3. BETTER DEFAULTS MODE OPTION - DEVELOPMENT - Better runtime error

    messages - Fast incremental compilation - Better tooling for in-browser debugging
  4. BETTER DEFAULTS MODE OPTION - PRODUCTION - Small output size

    - Fast code at runtime - Easy to use output assets - Omitting development-only code
  5. “ Webpack 4 - the Airbnb of module types for

    optimal web performance” - @unicodeveloper
  6. MODULE TYPES - WEB ASSEMBLY OUT OF THE BOX -

    webassembly/experimental - import webassembly modules into your js apps to make it fast!
  7. MODULE TYPES - JSON TREE SHAKING import { succeed }

    from ‘./details.json’; REMOVE UNUSED CODE. DEAD CODE ELIMINATION
  8. NEW PLUGIN SYSTEM ❖ Must provide a name when adding

    plugins. ❖ Register hooks by creating a new Hook object as property of the hooks object. ❖ The hooks object houses all hooks as property of the extensible class.
  9. WASM support to become stable Module disk cache between build

    processes CSS as a first class citizen WEBPACK 5? ⛷