Making small modules actually work with webpack and npm

on YouTube ↗24m

" summary

Claim: webpack plus npm can make tiny front-end modules truly modular by increasing cohesion and reducing coupling. Concrete tools and steps: use Babel loader (JSX) and CSS loader + style loader and url loader for images, enable local scope CSS for per-component classes, configure include/exclude for loaders, publish-dev with npm link, set library target (UMD) and externals (omit React), and use resolve.fallback or remove duplicate React to avoid two copies.

AI-written summary · about

" chapters (9)

1. 0:00Start
2. 6:13COHESION
3. 6:43COUPLING
4. 8:07WHAT'S THE PROBLEM?
5. 12:01LOADERS FOR TRANSPILING
6. 13:09LOADERS VS. TRANSFORMS
7. 16:38LOADERS FOR CSS
8. 19:23LOADERS FOR IMAGES
9. 23:45RESOURCES

" related talks

• 28mWebpack for a better development workflowBlake Newman · Frontend United 2016
• 19mModule FrontiersJames Burke · dotJS 2013
• 41mOnce you go webpack you never go backMaciej Hryniszak · JDD 2016
• 12mWriting a WebmoduleNathan Rajlich · JSConf.ar 2014
• 36mUnbundling the JavaScript module bundlerLuciano Mammino · Codemotion Rome 2018
• 40mBuild Your Own webpack (Live Coding an Ultra-Simplified Example of a Modern Module Bundler in JavaScript)Ronen Amiel · You Gotta Love Frontend Conference 2018
• 26mA tale of two front-end development environments: or how bend npm3 to your willKate Hudson · npm camp 2016
• 17mBundling your Front-End with webpackSandeep Singh · NDC London 2017