文章内容
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]
黄兵个人博客原创。
转载请注明出处:黄兵个人博客 - Flask webpack 配置相关问题总结
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
css Flex 布局图解
css Flex 布局图解
评论列表