I am trying to use Flask to send an html view (template) and React for the front end, but I am having issues setting up the webpack-dev-server on the front end. My confusion is, my Flask app is running on port 5000 and sends the view on the port. WebpackdevServer starts on port 8080.
I know webpack dev server serves the bundles out of memory as well, but how do I use this to create Hot Module Replacement. I have read other answers and using webpack watch in conjunction with dev server seems like its not technically correct.
What do I need to do to have my script tag that is on my Flask html template to load the bundle file generated by webpack or webpack dev server?
<!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"
});
I run the command `webpack-dev-server --config /path/to/dev/config but it doesnt seem like it does anything except open a new tab to localhost:8080
