Flask-Webpack 项目教程

Flask-Webpack 项目教程

flask-webpackA Flask extension to manage assets with Webpack.项目地址:https://gitcode.com/gh_mirrors/fl/flask-webpack

1. 项目的目录结构及介绍

Flask-Webpack 项目的目录结构如下：

flask-webpack/
├── app/
│   ├── __init__.py
│   ├── asset.py
│   ├── templates/
│   │   └── index.html
│   └── static/
│       └── assets/
├── webpack.config.js
├── package.json
└── requirements.txt

目录结构介绍

• app/: 包含 Flask 应用的主要代码。
  • __init__.py: 初始化 Flask 应用。
  • asset.py: 处理资产管理的模块。
  • templates/: 存放 HTML 模板文件。
  • static/: 存放静态文件，如 CSS、JavaScript 等。
  • assets/: 存放未打包的前端代码。
• webpack.config.js: Webpack 配置文件。
• package.json: 管理项目的依赖和脚本。
• requirements.txt: 列出 Python 依赖包。

2. 项目的启动文件介绍

项目的启动文件是 app/__init__.py，其内容如下：

from flask import Flask
from flask_webpack import Webpack

webpack = Webpack()

def create_app():
    app = Flask(__name__)
    webpack.init_app(app)

    @app.route('/')
    def index():
        return render_template("index.html")

    return app

if __name__ == "__main__":
    app = create_app()
    app.run()

启动文件介绍

• create_app(): 创建并配置 Flask 应用实例。
• webpack.init_app(app): 初始化 Webpack 扩展。
• @app.route('/'): 定义根路由，返回 index.html 模板。

3. 项目的配置文件介绍

项目的配置文件主要是 webpack.config.js 和 app/__init__.py 中的配置。

webpack.config.js

module.exports = {
  entry: './app/static/assets/index.js',
  output: {
    path: __dirname + '/app/static/build',
    filename: 'bundle.js'
  },
  // 其他配置项...
};

app/init.py 中的配置

app.config['WEBPACK_MANIFEST_PATH'] = '/build/manifest.json'

配置文件介绍

• webpack.config.js: 定义 Webpack 的入口文件、输出路径和其他配置项。
• WEBPACK_MANIFEST_PATH: 指定 Webpack 生成的 manifest 文件路径。

通过以上配置，Flask-Webpack 项目可以有效地管理前端资源，并提供快速的开发和生产环境构建。

flask-webpackA Flask extension to manage assets with Webpack.项目地址:https://gitcode.com/gh_mirrors/fl/flask-webpack