Flask 用 webpack 找不到静态文件 [英] Flask can't find static files with webpack
问题描述
我目前正在创建一个涉及flask 和webpack 的项目.目前flask服务端可以找到revelant模板，但是找不到相关的JavaScript.
I'm currently creating a project involving flask and webpack. Currently the flask server is able to find the revelant template, but is not able to find the relevant JavaScript.
我有一个 webpack 配置，用于使用 webpack html 插件创建 HTML 文件，如下所示:
I have a webpack config for creating the HTML file using the webpack html plugin like so:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {app: './src/index.js', print: './src/print.js'},
output: {filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist')},
plugins: [new HtmlWebpackPlugin({template:"./src/index.html"}), new CleanWebpackPlugin(['dist'])],
};
这使用了 src 目录中名为 index.html 的模板，其中包含以下内容:
This uses a template called index.html in the src directory which contains the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hellow World</title>
</head>
<body>
<h1>It Works</h1>
</body>
</html>
应该由 webpack 与以下 javascript 捆绑在一起，index.js:
Which should be bundled by webpack with the following javascript, index.js:
import _ from 'lodash';
import printMe from './print.js';
function component() {
let element = document.createElement('div');
let btn = document.createElement('button');
// lodash now imported
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
// new button
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe;
element.appendChild(btn);
return element;
}
document.body.appendChild(component());
和print.js:
export default function printMe() {
console.log('I get called from print.js!');
}
app.py 如下所示:
The app.py looks like the following:
from flask import Flask, render_template
app = Flask(__name__, template_folder="dist/", static_folder="dist/")
@app.route("/")
def index():
"""
renders basic index page
:return: template
"""
return render_template("index.html")
# app entry point
if __name__ == "__main__":
app.run(debug=True)
运行构建后，dist文件夹中会生成一个模板，index.html中的内容如下:
After running a build, a template is produced in the dist folder with the following content in index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hellow World</title>
</head>
<body>
<h1>It Works</h1>
<script type="text/javascript" src="app.bundle.js"></script><script type="text/javascript" src="print.bundle.js"></script></body>
</html>
我无法弄清楚它如何能够找到模板但无法找到相关的 JavaScript.
I can't workout how it is able to find the template but not able to find the relevant JavaScript.
推荐答案
app.bundle.js 根据您的配置的正确 URL 是 /dist/app.bundle.js
The correct URL for app.bundle.js as per your configuration is /dist/app.bundle.js
如果你想从不同的文件夹提供静态文件，你必须设置 static_url_path 参数，在这种情况下设置为 "":
If you want to serve static files from a different folder, you have to set the static_url_path parameter, in this case to "":
app = Flask(__name__, template_folder="dist", static_folder="dist", static_url_path="")
参考:https://vilimpoc.org/blog/2012/11/21/serving-static-files-from-root-and-not-static-using-flask/
这篇关于Flask 用 webpack 找不到静态文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
