Webpack dev server with flask html templates

ztigrdn8 于 2023-10-19 发布在 Webpack

关注(0)|答案(1)|浏览(139)

我试图使用Flask发送一个HTML视图（模板）和前端的React，但我在前端设置webpack-dev-server时遇到了问题。我的困惑是，我的Flask应用程序在端口5000上运行，并在端口上发送视图。WebpackdevServer在端口8080上启动。
我知道webpack dev server也会提供内存不足的bundle，但是我如何使用它来创建热模块替换呢？我已经阅读了其他的答案，并使用webpack手表与开发服务器似乎不符合技术要求。
我需要做什么才能让Flask html模板上的script标签加载webpack或webpack dev server生成的bundle文件？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <div id="main"></div>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script defer src="../js/main.bundle.js" type="text/javascript"></script>
  </body>
</html>

//webpack dev config
const ab_path = path.resolve(__dirname, '../', 'static/', 'js/');
module.exports = merge.merge(common, {
  entry: ["./src/index.js"],
  output: {
    filename: '[name].bundle.js',
    path: path.join(process.cwd(), "../static/js")
  },
  // o
  devtool: 'inline-source-map',
  devServer: {
    hot: true,
    open: true,
    static: path.resolve(ab_path),
  },
  plugins: [
    new ESLintPlugin()
  ],
  mode: "development"
});

我运行命令`webpack-dev-server --config /path/to/dev/config，但它似乎没有做任何事情，除了打开一个新的标签到localhost：8080

webpack

来源：https://stackoverflow.com/questions/76848021/webpack-dev-server-with-flask-html-templates

1条答案

按热度按时间

wz1wpwve1#

1.配置Flask以服务于React App：

from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
    return render_template('index.html')
if __name__ == '__main__':
    app.run(debug=True)

1.更新您的HTML模板：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <div id="main"></div>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        {% if DEBUG %}
        <script defer src="http://localhost:8080/main.bundle.js" type="module"></script>
        {% else %}
        <script defer src="{{ url_for('static', filename='js/main.bundle.js') }}"></script>
        {% endif %}
    </head>
    <body>
    </body>
</html>

1.更新Webpack开发人员配置：

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require('path');
module.exports = merge(common, {
entry: ['./src/index.js'],
output: {
    filename: '[name].bundle.js',
    path: path.join(process.cwd(), 'dist'),
    publicPath: 'http://localhost:8080/', // Important for webpack-dev-server
},
devtool: 'inline-source-map',
devServer: {
    hot: true,
    open: true,
    static: path.resolve(process.cwd(), 'dist'),
},
mode: 'development',
});

1.更新Webpack生产配置：

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require('path');
module.exports = merge(common, {
entry: ['./src/index.js'],
output: {
    filename: '[name].bundle.js',
    path: path.join(process.cwd(), 'static', 'js'),
},
mode: 'production',
});

展开查看全部

赞(0）回复(0）举报 2023-10-19

我来回答

Webpack dev server with flask html templates

1条答案

相关问题

热门标签

最新问答