how to make webpack typescript react webpack-dev-server configuration for auto building and reloading page

I put here more complete and (what is more important) more correct answer for anybody who may stumble upon the configuration of dev environment for react-webpack-typescript development. Somehow reading documentation was not good enough for me and I had to spend more than a day to make it work.

So I wanted to get the directory structure where bundled javascript files lie one level deeper than html index.html file. Look at the initial post for the full directory structure.

And as a developer I wanted when I change some .tsx file in /src folder my changes be reflected in the browser and also we need to recompile bundled .js file. For these purposes there are two scripts are created in the scripts block of package.json file of the project:

  "scripts": {
    "start": "webpack-dev-server --content-base ./dist --hot --inline --colors --port 3000 --open",
    "build": "webpack --config webpack.config.js --watch",
  }

The first one starts webpack-dev-server providing the root directory /dist for it to serve and --hot --inline keys for it to automatically reload browser page and to get rid of unnecessary iframe. There is also --port defined and auto page --open when webpack-dev-server is started.

The second command is for auto rebuilding of the bundled app.js by webpack thanks to the --watch key.

And for these commands to work as expected the webpack should be properly configured in webpack.config.js. And the most delicate part for me (and for many others as I later saw) was the correct path, publicPath and filename settings of the output block. There is a mistake in my initial post in the publicPath which made my webpack-dev-server not working.

Not working output block was:

output: {
    filename: "app.js",
    publicPath: "/dist/",
    path: "./dist/build/"
}

The output block which works is:

output: {
    filename: "app.js",
    publicPath: "/build/",
    path: "./dist/build/"
}

publicPath property is used by the webpack-dev-server to refresh the browser page and it should be set to the directory where your compiled .js files lie relative to the root server directory which is set by --content-base key in my start script and refers to ./dist inside my project. So the correct value is /build/ and not /dist/.

path and filename properties are used by webpack and command where to put and how to name the bundled .js file. In my case the ./dist/build/app.js file will be created.

One more thing that is certainly present in docs but I'd like to mension here is that when I save some .tsx file after I started my webpack-dev-server with my start script but haven't run the build command (which makes webpack watch changes) I get the updated results in the browser but my bundled app.js file is not changed. And this is because the webpack-dev-server only updates the in-memory copy of bundled .js file and not the file itself. To syncronize we need to rebuild the bundle with webpack.

If I want my bundled .js file to stay in syncro with the browser page I need to make webpack watch changes and webpack-dev-server to make hot reload of the page, so I run both "start" and "build" scripts. But I can't run both of them from one command prompt on my windows dev machine, so I run each of them in separate with:

This is valid only for windows!

start npm run start && start npm run build

And for the sake of my fingers I put this line into the run.bat file which is put into the project folder. Now I can just open the windows terminal in VSCode editor and issue the command "run" there.

That's it for now.