Skip to main content
 首页 » 编程设计

javascript之Flask 找不到带有 webpack 的静态文件

2025年05月04日24lori

<分区>

我目前正在创建一个涉及 flask 和 webpack 的项目。目前 flask 服务器能够找到相关模板,但无法找到相关的 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 捆绑在一起, 索引.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 的。