It might be a good time to start a new thread dedicated to using Webpack for theming Plone 5.
After I managed to make all Plone 5 frontend resources to flow through Webpack as in my reference implementation https://github.com/datakurre/plonetheme.webpack, we've deployed about a dozen Plone 5 sites with Webpack built themes. By theming with Webpack, I mean that:
- All JS and CSS/LESS files otherwise managed with resource registry are compiled into Webpack bundles, usually one for anonymous and other for authenticated users.
- Site and theme-related UX-features are developed within theme and merged with Plone resources using Webpack.
- CSS and JS bundles are injected into theme's HTML-mockup files and manifest.cfg (for TinyMCE), automated with webpack-html-plugin.
- Diazo rules are used to drop the default resource registry -bundles and toggle between anonymous and authenticated bundles.
- modern JS development flow with ES6 and other Webpack-integrated goodies
- webpack-dev-server's almost instant code-reload.
- generic Webpack learning curve
- configuring Webpack to properly shim all existing "legacy" JS may not be trivial
- JS outside patterns cannot be bundled with Webpack and keeping that functional may need extra care.
My first approach with plonetheme.webpack required a confusing mess of npm-packages, git-checkouts and Webpack resolve aliases to find all the JS and CSS resources required by Plone, and that added some extra cost for maintaining those themes. At the Plone Barcelona Sprint in May, Eric Brehault gave me an idea, how it would be possible to fetch all the resources for Webpack directly from Plone. Last week I finally got that to work, resulting in a new Webpack plugin dedicated for building Plone themes.
Welcome plonetheme-webpack-plugin that
- reads require.js configuration from a live Plone site and makes it available as Webpack resolve alias mapping
- reads LESS-variables from a live Plone site and makes those available for Webpack LESS-loader
- plugins Webpack's resolve hooks for fetching all available resources from a live Plone site
- provides an increasing amount of Webpack loaders and instantiated Webpack plugins to fix all the seen issues when bundling Plone frontend resources with Webpack
- provides a customizable Webpack configuration with all the above enabled by default.
That's probably more than recommended for a single plugin, but as I'm going to need to maintain a lot of Webpack built Plone 5 themes, I want them to share as much configuration as possible by maintaining that plugin.
I have the following public examples for trying out the plugin:
The provided Webpack configuration is tightly integrated my theme and project structure, but learning it from the plugin code should help in trying with plugin also with other kind of setups.
The plugin package does not yet include all work from plonetheme.webpack (e.g. some non-default bundles may not build yet), but will, once I migrate my existing themes to use it.