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.

Transcript

1. Webpack & PostCSS December 14th 2016 Sebastian Werner, Sebastian Software GmbH
2. @swernerx @sebastiansoft github/sebastian-software Sebastian Werner
3. 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
4. Timing Matters Time Machine
5. Time Machine Webpack == qooxdoo generator or jasy
6. But these were implemented in Python… Time Machine
7. …NodeJS is for the Youth Time Machine
8. Some things were missing, some things were better… Time Machine
9. Yep, better. 
 Just because it’s modern does not mean it’s good. Time Machine
10. There is pretty amazing stuff though Time Machine
11. Hot Reloading Generic Transpiling Plugin System Huge Community Developer Awareness
12. Webpack Wise folks bet on good concepts
14. Webpack Concepts Static Configuration
15. Webpack Concepts Required by features like: file watching rebuilds
16. Webpack Concepts Required by features like: file watching rebuilds and hot reloading awesomeness
17. Domain Specific Language qooxdoo Grunt
18. API for Task Definition Jasy Gulp Fly Broccoli
19. Everything is possible with Webpack Not a scam
20. Nobody deeply understands Webpack We gonna fix that
21. Everything is a Module Scripts / Styles / Images / Fonts
22. Processing Required ES2017/TypeScript to ES5 Sass/Less to CSS Asset Optimization Sprites Inlining
23. HTTP/2 Bundling is useful even in modern times
24. NodeJS Bundling improves startup times and memory usage
25. Cross Mime Imports Node does not support importing CSS / Assets Especially relevant for SSR (Universal React)
26. Cherry Picking Tree Shaking reduces API surface / parse time
27. Basic Config
28. Entry Initial entry point(s) of your application
29. Module Any (virtual) file managed by Webpack
30. Chunks Bundled set(s) of modules
31. Loader Processes file content into preliminary output format
32. 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
33. Webpack Ecosystem
34. Boilerplates • Create React App: Webpack v1, no SSR, Good UX
 by people at Facebook • React Universally: Universal React + Webpack
 by Sean Matheson • Advanced Boilerplate: +PostCSS +Apollo +Redux
 by Sebastian Werner
35. Factory Helpers • Webpack Merge
 Specific deep object merge for custom configs • Webpack Blocks
 Shared/Reusable blocks of configuration
36. Multi Threading • Happypack: 
 Running loaders in parallel
37. Caching • Hard Source: 
 Advanced Caching for Modules
38. Code Splitting • Code Split Component: 
 Declarative code splitting with tweaks for SSR
39. Chunk Info • Chunk Manifest Plugin: 
 Extracts hashes into external file
40. News in Webpack v2 See also: https://gist.github.com/sokra/27b24881210b56bbaff7
41. Better Docs https://webpack.js.org/configuration/
42. Native ES6 Modules
43. Tree Shaking Not like Closure Compiler with Cross Bundle Code Motion
44. import() API Relevant for Code Splitting / Dynamic Imports
45. Cleaner Config & Validation
46. Sponsoring
49. Hints
50. 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
51. Hashing • Webpack Digest Hashing broken • Extract chunk hashes from initial chunk using Chunk Manifest Plugin • Base62 better than Hex • Eight characters are enough
52. Transpiling • Transpile what is needed instead of everything • Babel Preset Env • For current browser only in development
53. Duplication • Multiple versions are transparently used • Lodash vs. Lodash-ES vs. Lodash-XXX • Use ES6 Imports! Really!
54. 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
55. Environment • Keep environment specifics local • Useful for API urls, database password, etc. • Ignore from Git
56. 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.
57. Future
58. Performance Most things are fast except loaders + optimization
59. Caching Rebuilding the same code takes surprisingly long
60. Hashing Permanent caching / CDN usage require stable hashes Chunk Manifest Digest Plugin + SHA256 + Base62
61. Parallelism No built-in handling for multi core environments
62. CSS Code Splitting Just not there. When extracting it’s always one chunk.
63. Localization Nothing actively maintained.
64. Permutations Efficiently built multiple variants / locales / environments
65. JS Compression Built-in Uglify does not work with ES2015 outputs
66. Better Tree Shaking After Webpack v2 use insights from 
 Rollup/Closure Compiler
67. 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
68. PostCSS
69. PostCSS AST + Efficient Tree Traversal
70. 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
71. Example Config
72. Open Source
73. 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
74. Thank You