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

Webpack v2 and PostCSS - Intro, Internals and Outlook

Webpack v2 and PostCSS - Intro, Internals and Outlook

Overview of Webpack concepts. New features in Webpack v2. Hints for usage. Suggestions for the finest plugins and more. Presented at RheinNeckar JS in December 14th 2016.

Sebastian Werner

December 14, 2016

More Decks by Sebastian Werner

Other Decks in Programming


  1. About me • Co-Initiator & Lead Developer of qooxdoo •

    Initiator of Jasy Tooling & Core Library • Companies: 1&1, Deutsche Telekom, Deutsche Bank, Hornbach, Syzygy, Zynga, … • Co-Founder of Sebastian Software GmbH • Today: React, VueJS, Webpack, PostCSS, Rollup
  2. Cross Mime Imports Node does not support importing CSS /

    Assets Especially relevant for SSR (Universal React)
  3. Plugin Kind of a middleware which is able to incept

    basically any operation. Applied after loading of content. Examples: File Loader Plugin: Referencing and copying assets Extract Text Plugin: Extract referenced styles into CSS chunks
  4. Boilerplates • Create React App: Webpack v1, no SSR, Good

 by people at Facebook • React Universally: Universal React + Webpack
 by Sean Matheson • Advanced Boilerplate: +PostCSS +Apollo +Redux
 by Sebastian Werner
  5. Factory Helpers • Webpack Merge
 Specific deep object merge for

    custom configs • Webpack Blocks
 Shared/Reusable blocks of configuration
  6. Compression • Uglify does not work with ES2015 output •

    Use Babili or Closure Compiler instead • CSS-O is better than CSS Nano • Don’t inline assets into JS
  7. Hashing • Webpack Digest Hashing broken • Extract chunk hashes

    from initial chunk using Chunk Manifest Plugin • Base62 better than Hex • Eight characters are enough
  8. Transpiling • Transpile what is needed instead of everything •

    Babel Preset Env • For current browser only in development
  9. Duplication • Multiple versions are transparently used • Lodash vs.

    Lodash-ES vs. Lodash-XXX • Use ES6 Imports! Really!
  10. Universal Builds • Bundling Node packages for server build is

    tricky • Light bundling or big bundle • Replace browser modules with „node-noop“ • Assets Plugin for referring to client chunks on server side • Inject „source-map-support“ for source maps in NodeJS
  11. Environment • Keep environment specifics local • Useful for API

    urls, database password, etc. • Ignore from Git
  12. Performance Strategies • DLL Bundles - but these require some

    maintenance • Hard Source for fixing rudimentary Webpack Loader Cache • Happy Pack for parallel transpiling. But that’s quite broken right now.
  13. Legacy Some legacy stuff which should probably be extracted Legacy

    hashing, Uglify compression, preliminary progress, … Extracting Hot Loading, Web Workers, … Slimming the Webpack core while improving its API surface
  14. Excellent Plugins • Autoprefixer: Add prefixes based on browser selection

    • Smart Import: Multi Format Import • Simple URL: Basic URL Remapping • Assets: Quering for dimensions • Advanced Variables: Conditions, Loops & Variables • Sassy Mixins: Mixins like in Sass • Lost: Probably the best solution for building layouts • Calc: Resolve static calculations during deployment • Easings: Extended collection of named easings • Nested: Flattening of Sass-like nesting • Grid Kiss: Visually create grids using ascii art
  15. Current Projects • Advanced Boilerplate:
 Universal React + Redux +

    Apollo + PostCSS • Rollup Plugin Relink:
 Rollup plugin to flatten and copying non script sources • Pre-Publish-Lib:
 Rollup-based pre-publishing utility for libraries • PostCSS Smart-Import
 Better importing for PostCSS • PostCSS Simple URL
 Plain and basic URL handling for PostCSS • S15E-JavaScript:
 Standard ESLint / Stylelint + Basic Gulp Tooling