Manage Your Assets with Flask-Webpack
Update: I gave a remote talk at Chadev on this topic:
Managing assets used to be hard. Here’s 5 common things you are probably doing every time you deploy your web application:
- Minify all your CSS and JS
- Optimize all of your images by compressing them
- Convert SASS/LESS/etc. into CSS
- Convert Typescript/Coffeescript/etc. into JS
- Tag all of your assets (including images) with md5 hashes
Doing the above and more by hand is brutal and not doing it at all is a disservice.
Don’t Forget About Development Mode
It usually sucks to make all of the above steps happen during development because you need to wire up half a dozen different tools, watchers and it’s a bit slow.
Then you need to solve the problem of adjusting your server side templates to make everything work. If you have a file named
foo.d5cbf1.css and change it, the md5 might change and now the file name would be
You’re not going to update that by hand right? I hope not!
Dealing With Friendly Code
In development mode I want to organize my files nicely. I really like the CommonJS module system. It’s great to be able to just drop in
Webpack to the Rescue
Webpack allows you to do the above and more. Imagine writing some React code and while you have the page open you decide to interact with the page by adding data to a widget you’re developing.
Now you can instantly see your changes without touching the reload button and you didn’t even need to install a browser extensions or setup watchers.
An Introduction to Flask-Webpack
Flask-Webpack ties Webpack and Flask together. It exposes a few global template tags so that you can work with assets in your jinja templates and it works with any wsgi server.
Everything is explained in the project’s README file but I wanted to show you a few minute demo of how you can use some of Webpack’s features with a real Flask app:
It’s Not Just for Flask
Flask-Webpack is of course but the main workhorse to make all of this work is Webpack along with a plugin I wrote for it called ManifestRevisionWebpackPlugin.
Webpack can be used with any web framework. The custom plugin also supports Ruby on Rails by exporting a
manifest.json file in a way that Rails understands. The plugin was designed to allow for custom formatters to be added in.
What asset tools are you using for Flask? Let me know in the comments below.