Polymer + Webpack: Bringing Web Components to a Framework Near You
summary
A concrete solution: the Polymer Webpack loader converts mixed HTML/CSS/JS elements into pure JavaScript modules by rewriting HTML imports to JS imports, turning templates into runtime-registered strings, and piping styles and images through existing Webpack loaders. It enables dynamic import code-splitting, permits node_modules imports, and preserves optimization plugins and dev-server benefits. Caveats: polyfills (custom-elements ES5 adapter, webcomponents loader) require careful ordering. The loader is used in production (AngularJS and TypeScript projects) and includes a demo and Polymer Starter Kit integration.
AI-written summary · about
chapters (24)
- 0:00Intro
- 0:13Why Polymer Webpack
- 2:15Polymer as a Library
- 3:27Mixed Content
- 5:46What is Webpack
- 7:04Dependency Graph
- 7:51Webpack Loader
- 9:14Webpack Plugins
- 10:06Code Splitting Lazy Loading
- 11:13Dynamic Import Statement
- 12:04Polymer Loader
- 13:44Importing Node Modules
- 14:33Importing Images
- 15:52Asynchronous vs Dynamic Imports
- 17:21Webpack Configuration
- 18:24Loader Configuration
- 20:01Module ImportExport
- 21:12shimming
- 22:54normalize modules
- 23:42lock yourself in
- 24:30URL vs Module vs Node
- 25:44Bootstrapped Polyfills
- 26:49CSS Polyfills
- 28:05Wrapup
