用于连接和管理webpack资产的Flask扩展
Flask-Manage-Webpack的Python项目详细描述
什么是烧瓶管理网页包？在
连接和管理Web包生成的资产的Flask扩展。
Flask-Manage-Webpack读取manifest.json文件由webpack-manifest-plugin自动生成的文件，
开箱即用可以：
- 快速引导你的网页包配置。在
- 通过模板中的
webpack_url_for()导入资产。在 - 通过哈希标记进行浏览器缓存。在
- 代码拆分和动态导入（）。在
- 在
Purgecss的帮助下删除未使用的CSS - 与内容安全策略兼容：
e.g. script-src: 'nonce-<random-value> - 使用CDN和静态主机提供程序，如
Netlify使您的网页包生成过程自动化。在 - 使用Webpack扩展功能。在
快速启动
安装：pip install Flask-Manage-Webpack
fromflaskimportFlaskfromflask_manage_webpackimportFlaskManageWebpackapp=Flask(__name__)# Register Extensionmanage_webpack=FlaskManageWebpack()manage_webpack.init_app(app)
Initialize Webpack配置：
- 运行
flask manage-webpack --app <your_flask_app>。这将生成Webpack配置文件。在 - 在您的
app/static文件夹中，创建一个manifest.json文件，其中有大括号i.e. { }
Run Webpack:npm start
For more info, checkout the demo app inside example folder.
如何导入HTML格式的资产？
将主样式表导入HTML:
<link rel="stylesheet" href="{{ webpack_url_for('main_css.css') }}">
将主JavaScript导入HTML:
<script id="main_js" src="{{ webpack_url_for('main_js.js') }}"></script>
图像和其他文件呢？
- 将图像放入
assets/img/或首选文件夹结构。在 - 在HTML中，通过相对路径导入图像：
<img src="{{ webpack_url_for('img/something.jpg') }}">
配置变量：
MANAGE_WEBPACK_MANIFEST_PATH默认为static/manifest.jsonMANAGE_WEBPACK_ASSETS_URL：静态url域名。默认为NoneMANAGE_WEBPACK_MANIFEST_URL：你的绝对值manifest.json文件网址。如果您希望manifest.json文件远程服务器中的文件， 如果您希望通过将web包构建过程托管到Netlify这样的服务来实现web包构建过程的自动化。i、 e.https://example.com/manifest.json
生产中：
如何重新加载清单文件？
当您添加另一个资产或进行更改时，webpack-manifest-plugin在manifest.json文件.
在开发模式下，当您对资产进行更改时，此插件会自动重新加载并重新获取清单文件，
但在生产环境中，在每个请求中获取清单文件并不理想。
因此，当您添加一个新资产（即图像）时，您必须告诉Flask-Manage-Webpack重新加载清单。
- 项目
标签：
欢迎加入QQ群-->： 979659372
