Live Reload
With webpack-dev-server
, we can use it to auto reload web page when the code of the project changed.
npm install webpack-dev-server@4
Please edit frontend/webpack/webpack.config.dev.js
devServer: {
host: "0.0.0.0",
port: 9091,
headers: {
"Access-Control-Allow-Origin": "*",
},
devMiddleware: {
writeToDisk: true,
},
watchFiles: [
Path.join(__dirname, '../../django_app/**/*.py'),
Path.join(__dirname, '../../django_app/**/*.html'),
],
},
Notes:
- Remove
hot: true
from thedevServer
section - Then you should config the
watchFiles
- Here we tell
webpack-dev-server
to watch all.py
and.html
files under thedjango_app
directory.
Now if we change code in the editor, the web page will live reload, which is awesome!