From f78b89e943e879bd7578244379ba5cea6d0a5111 Mon Sep 17 00:00:00 2001 From: Avishek Banerjee Date: Sat, 26 Mar 2022 20:38:54 +0530 Subject: [PATCH] docs(guides): auto reload fixed in Development In the [Development Guide under Using Watch Mode section] (https://webpack.js.org/guides/development/#using-watch-mode) the content says: >The only downside is that you have to refresh your browser in order to see the changes. It would be much nicer if that would happen automatically as well, so let's try webpack-dev-server which will do exactly that. The follow-on section about webpack-dev-server is expected to provide guidance about creating a setup that would reload new code as it is written and refresh the browser to show the changes. But the code example doesnot do so. The problem is in the webpack.config.js code example. The devServer configuration as mentioned will not refresh the browser. To actually refresh the page the minimum configuration that needs to be added to devServer is `watchFiles: ['./src/**/*.*']` Fixes: webpack/webpack#15477 --- src/content/guides/development.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/content/guides/development.mdx b/src/content/guides/development.mdx index d2d511ad5ebf..b3174bf2fdca 100644 --- a/src/content/guides/development.mdx +++ b/src/content/guides/development.mdx @@ -16,6 +16,7 @@ contributors: - chenxsan - maxloh - snitin315 + - avishek143 --- T> This guide extends on code examples found in the [Output Management](/guides/output-management) guide. @@ -214,6 +215,7 @@ Change your configuration file to tell the dev server where to look for files: devtool: 'inline-source-map', + devServer: { + static: './dist', ++ watchFiles: ['./src/**/*.*'], + }, plugins: [ new HtmlWebpackPlugin({ @@ -228,7 +230,7 @@ Change your configuration file to tell the dev server where to look for files: }; ``` -This tells `webpack-dev-server` to serve the files from the `dist` directory on `localhost:8080`. +This tells `webpack-dev-server` to serve the files from the `dist` directory on `localhost:8080` and refresh the browser with the new content when any source file inside the `./src` folder changes. T> `webpack-dev-server` serves bundled files from the directory defined in [`output.path`](/configuration/output/#outputpath), i.e., files will be available under `http://[devServer.host]:[devServer.port]/[output.publicPath]/[output.filename]`.