Flask无法找到Webpack打包的静态文件问题求助

Hey there! Let’s figure out why your Flask server can’t locate those JavaScript files when using webpack-html-plugin—I’ve tackled this exact headache before, so here’s a step-by-step breakdown of what to check:

Flask looks for static assets (like JS/CSS) in the default static/ directory by default. You need to make sure Webpack dumps its bundled files right where Flask can find them. Update your webpack.config.js output settings:

// webpack.config.js
const path = require('path');

module.exports = {
  // ... other configs
  output: {
    filename: '[name].bundle.js', // Or your preferred naming pattern
    path: path.resolve(__dirname, 'static/dist'), // Output to Flask's static subfolder
    publicPath: '/static/dist/' // Critical: Ensures HTML uses the correct absolute path for assets
  }
};

The publicPath is key here—it tells Webpack to generate asset URLs that Flask can resolve, like /static/dist/main.bundle.js.

You’re using a template in src/index.html—make sure Webpack generates the final HTML file into Flask’s templates/ directory, and that it injects the correct JS paths automatically. Adjust your plugin config:

// webpack.config.js plugins section
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ... other configs
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // Your source template file
      filename: '../templates/index.html', // Output to Flask's templates folder (relative to output.path)
      inject: 'body' // Auto-injects bundled JS into the HTML (no manual script tags needed!)
    })
  ]
};

Since your output.path is static/dist, using ../templates/index.html puts the generated HTML directly into your project’s root templates/ folder—exactly where Flask expects it.

Don’t manually add <script> tags pointing to index.js or print.js in your src/index.html! The HtmlWebpackPlugin will handle injecting the bundled JS file(s) for you, using the correct path from your publicPath setting. Let the plugin do the work here to avoid path mismatches.

Make sure your app.py is rendering the template correctly—Flask automatically looks in the templates/ folder, so you don’t need extra paths:

# app.py
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html') # Just use the template filename directly

if __name__ == '__main__':
    app.run(debug=True)

After running your Webpack build command (like npm run build), do a quick check:

• Confirm static/dist/ contains your bundled JS file (e.g., main.bundle.js)
• Open templates/index.html and ensure the <script> tag uses an absolute path like /static/dist/main.bundle.js (not a relative path like dist/main.bundle.js)

If all these pieces line up, Flask should be able to serve both the template and the JavaScript files without issues!

内容的提问来源于stack exchange，提问作者user5948213