Flask 无法使用 webpack 找到静态文件 [重复]答案

【问题标题】：Flask can't find static files with webpack [duplicate]Flask 无法使用 webpack 找到静态文件 [重复]
【发布时间】：2018-07-21 04:35:45
【问题描述】：

我目前正在创建一个涉及烧瓶和 webpack 的项目。目前烧瓶服务器能够找到相关的模板，但无法找到相关的 JavaScript。

我有一个 webpack 配置，用于使用 webpack html 插件创建 HTML 文件，如下所示：

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 的模板，其中包含以下内容：

<!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：

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 如下所示：

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 中包含以下内容：

<!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 的。

【问题讨论】：

dist 文件夹中还有什么？
print.bundle.js 和 app.bundle.js

标签： javascript python flask webpack html-webpack-plugin

【解决方案1】：

根据您的配置，app.bundle.js 的正确 URL 是 /dist/app.bundle.js

如果您想提供来自不同文件夹的静态文件，您必须设置static_url_path 参数，在本例中为""：

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/

【讨论】：

非常感谢！
@Warmley 不客气 :)