What is Flask-Manage-Webpack?

A Flask extension that connect and manage your webpack generated assets. Flask-Manage-Webpack reads a manifest.json file auto-generated by webpack-manifest-plugin, and out of the box it made possible to:

1. Bootstrap your Webpack configuration fast.
2. Import your assets via webpack_url_for() in your templates.
3. Browser caching via hash tagging.
4. Code splitting and dynamic import().
5. Remove unused CSS, with the help of Purgecss
6. Compatible with Content-Security-Policy: e.g. script-src: 'nonce-<random-value>
7. Working with CDN, and static host provider such as Netlify for making your Webpack build process automated.
8. Extending the functionality by using Webpack.

---

Quick start

Install: pip install Flask-Manage-Webpack

from flask import Flask
from flask_manage_webpack import FlaskManageWebpack

app = Flask(__name__)

# Register Extension
manage_webpack = FlaskManageWebpack()
manage_webpack.init_app(app)

Initialize Webpack Config:

• Run flask manage-webpack --app <your_flask_app>. This will generate Webpack config files.
• In your app/static folder, create a manifest.json file with curly braces inside i.e. { }

Run Webpack: npm start

For more info, checkout the demo app inside example folder.

---

How to import assets in HTML?

Import your main stylesheet to HTML:

<link rel="stylesheet" href="{{ webpack_url_for('main_css.css') }}">

Import your main JavaScript to HTML:

<script id="main_js" src="{{ webpack_url_for('main_js.js') }}"></script>

What about images, and other files?

1. Put your images to assets/img/ or to your preferred folder structure.
2. In HTML, import your image via relative path: <img src="{{ webpack_url_for('img/something.jpg') }}">

---

Config Variables:

1. MANAGE_WEBPACK_MANIFEST_PATH defaults to static/manifest.json
2. MANAGE_WEBPACK_ASSETS_URL: Your static url domain name. Defaults to None
3. MANAGE_WEBPACK_MANIFEST_URL: Your absolute manifest.json url. This is useful if you wish to host your manifest.json file in a remote server, and if you like to automate your Webpack build process by hosting it to such service like Netlify. i.e.https://example.com/manifest.json

---

In Production:

How to reload your manifest file? When you add another asset or make changes, webpack-manifest-plugin insert mappings of your new asset build files in the manifest.json. In development mode when you made changes in your assets, this plugin automatically reload and re-fetch the manifest file, but in production this is not ideal to fetch the manifest file in every requests. So when you added a new asset (i.e. image), you have to tell Flask-Manage-Webpack to reload the manifest.

from .extensions import manage_webpack

@bp.route("/reload-manifest")
def reload_manifest():

    manage_webpack.reload_manifest()
    return redirect('/')