使用webpack管理资产的flask扩展。
Flask-Webpack-Fork的Python项目详细描述
注意：这是官方flask网页包插件的一个分支。因为nickjj的manifest-revision-webpack-plugin只解析了webpack.config.js文件中作为入口点脚本添加的资产，所以它被修补以与webpack-manifest-plugin一起使用。
什么是烧瓶网页包？
管理资产可能是一个严重的负担。以下是一些你能理解的事情 使用此软件包：
- 缩小资产
- 自动将供应商前缀附加到您的css中
- 优化图像大小
- 利用commonjs模块系统来组织javascript
- 编译标记
- 编译20多种客户端模板语言
- 少编译，sass和任何你能想象得到的css预处理器
- 将typescript、coffeescript和任何其他编译为javascript语言
- 将ecmascript 6（es）编译为es 5
- 使用热模块重新加载将react jsx编译为js
- 几乎是即时编译时，在我的工作站上大约20-50ms是常见的
- （可选）在开发模式下获取源映射
- 从一个被欺骗的本地开发资产服务器为您的资产提供服务
- 永远缓存所有资产，因为它们的文件名会被标记为md5
- 除了python之外，您唯一需要的运行时是nodejs
- 再也不要和文件监视程序打交道了，因为它都是为您服务的
- 还有更多…
以上所有特性都是使用Webpack的直接结果 管理你的资产。除了显而易见的胜利之外，这里的巨大胜利是 功能不在此包中。
这意味着你可以自由选择你想要的东西 不得不担心flask网页包版本。如果新的webpack插件变成 可用，您可以立即使用。
那么这个包裹是做什么的呢？
它设置了一些模板标记，以便您可以访问 Jinja模板。
这意味着您可以键入：
<img src="{{asset_url_for('images/hamburger.svg') }}" alt="Hamburger">
…编译完jinja模板后，您将看到以下内容：
<img src="images/hamburger.d2cb0dda3e8313b990e8dcf5e25d2d0f.svg"alt="Hamburger">
现在你可以高兴地告诉你的前端代理缓存汉堡图像 整整一年。如果你换过汉堡，MD5会换，但是你 不需要更改任何模板，因为asset_url_for 泰格知道怎么查。
安装
pip install Flask-Webpack-Fork
快速启动
from flask import Flask from flask_webpack import Webpack webpack = Webpack() app = Flask(__name__) webpack.init_app(app)
您可以在test app中查看完整的工作示例。
还有一个blog post and short video解释如何使用这个扩展。
它是如何工作的？
它希望您已经构建了一个清单文件，并处理其余的文件。你可以 使用webpack-manifest-plugin生成此清单文件。 此过程在启动dev资产服务器或构建时自动完成 准备产品发布的资产。所有这些都在 webpack.config.js文件。
设置
Flask-Webpack的配置与大多数烧瓶扩展相似。这是可用的 选项：
- WEBPACK_MANIFEST_PATH：默认值None
- 必需：您可以考虑使用./build/manifest.json，这取决于您。
- WEBPACK_ASSETS_URL：默认值publicPath from the webpack.config.js file
- 可选：使用此资产URL而不是publicPath。
- 您可以将此设置为您的完整域名或CDN正在生产中。
了解更多
网页包知识
你需要学习的大部分内容都与webpack相关，但是 这个repo中的示例应用程序足以让您入门。这里有一些资源 帮助您开始使用webpack:
救命啊！我的资产在开发之外不起作用
我明白了，所以基本上问题是您在 样式表和正在引用资源的相对路径，例如：
src: url('../../fonts/CoolFont.eot')
上面的方法在开发模式下工作，因为这就是文件所在的位置 位于但处于生产模式的资产不在那里。那asset_url_for 模板助手在服务器端为您处理所有这些，但现在您需要 在客户端也有一些帮助。
这里有几个选项，这取决于您使用的是css、sass还是其他什么 否则。如果你使用的是直接的css，你需要预先准备好所有的路径。 有一个特殊的标识符。
如果要重新编写上面的示例，现在应该是：
src: url('~!file!../../fonts/CoolFont.eot')
它将自动扩展到在每个环境中都有效的路径。
如果你使用sass，你可以创建自己的函数来简化 每天与合作。这样就足够了：
@function asset-url($path) {
@return url('~!file!' + $path);
}
现在您可以这样称呼它，一切都将正常工作：
src: asset-url('../../fonts/CoolFont.eot')
您可以随意创建附加的帮助函数，让您可以抽象出 相对前缀，如font-url或image-url。这真的取决于 你的资产已经准备好了。
贡献者
- 尼克·珍塔基斯（Nick Janetakis）nick.janetakis@gmail.com>；
- 5KYC0D3R<；https://github.com/5kyc0d3r>；
欢迎加入QQ群-->： 979659372
