Skip to content

Commit

Permalink
docs(guides): auto reload fixed in Development
Browse files Browse the repository at this point in the history
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
  • Loading branch information
avishek143 committed Mar 26, 2022
1 parent 0fdfbf5 commit f78b89e
Showing 1 changed file with 3 additions and 1 deletion.
4 changes: 3 additions & 1 deletion src/content/guides/development.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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({
Expand All @@ -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]`.

Expand Down

0 comments on commit f78b89e

Please sign in to comment.