文章内容

2022/9/22 18:29:33,作 者: 黄兵

Flask webpack 配置相关问题总结

最近项目使用 Flask + webpack 的方式开发,模板与后端逻辑代码与路由使用 Flask,前端的一些代码交由 webpack 打包。

但是再搭建脚手架的时候存在一些问题,经过研究之后,将这些问题解决,将存在的问题以及解决过程记录下来,以方便有相似需求的人。

webpack 的配置可以参考官方文档,再次不再赘述。

webpack.config.js 是这样的配置:

entry: ['./static/css/app.scss', './static/js/app.js'],
output: {
// This is necessary for webpack to compile
// But we never use style-bundle.js
filename: 'bundle.js',
},

这样配置打包,会在项目目录下面生成一个 dist 文件夹,如下图所示:

上图 dist 文件并不在 static 文件夹下,如果我们在模板中这样定义打包后的文件路径,将会出现 404 错误:

<link href="{{ url_for('static',filename='bundle.css') }}" rel="stylesheet">

我们修改 app/_init_.py 文件:

def create_app(config_name):
app = Flask(__name__, static_url_path="/dist/")

这里定义了 static 文件的url 路径,之后我们再次刷新页面,访问 css 文件的路径变成:/dist/bundle.css,但是还是 404

重新定义路由,代码如下:

@main.route("/dist/<path:path>")
def static_dir(path):
return send_from_directory("dist", path)

再次运行程序,依然是 404 错误,看样子只能将 dist 文件放到 static 文件夹下。

修改 webpack.config.js 配置文件,内容如下:

entry: ['./static/css/app.scss', './static/js/app.js'],
output: {
// This is necessary for webpack to compile
// But we never use style-bundle.js
path: path.resolve(__dirname, './static/dist'),
publicPath: '/static/dist/',
filename: 'js/bundle.js',
},

再次重新绑定,可以看到 dist 文件已经在 static 文件夹下,之后修改模板:

<link href="{{ url_for('static',filename='dist/bundle.css') }}" rel="stylesheet">

再次重新运行程序,问题已经得到很好的解决。


参考资料:

1、Link to Flask static files with url_for

2、Flask can't find static files with webpack [duplicate]

3、webpack.config.js


黄兵个人博客原创。

转载请注明出处:黄兵个人博客 - Flask webpack 配置相关问题总结

分享到:

发表评论

评论列表