Alright let’s pick up from part I where we have setup webpack, babel and react from scratch 🙂. In this story, we will be looking at how to set up a development server
Webpack dev server
webpack-dev-server is created by the webpack team and under the hood they have connected it with webpack to produce and serve assets.
It is solely for development purpose and should not be used for production
Add the devServer object to webpack.development.js which we have created in part I. Also don’t forget to import path.
Things that you need to know about devServer configuration
contentBase
Its value should be the same specified in part I, where output in webpack.config.js is set to dist. This tell the server where the assets are located and can serve them.
host & port
Setting host to be 0.0.0.0 allocate all IPv4 on your local machine. Let’s say you have two IPs addresses 172.16.0.10 and 192.168.0.1, your application is accessible on both. Using localhost or 127.0.0.1 will also work 🙂 but typing only your ip address in your favourite browser will not work. Can you guess why ? 😎
Pooorrrtt 😬 by default port 80 is reserved for http but in our case we have specified 8080. So use your ip address together with port. If you don’t know what you’re IP address is, use localhost
compress
This enable gzip compression. This is not required, but i prefer having this set to true, just because in production all assets will be compressed and it can be a good indication how performance can be measured
historyApiFallback
It serves index.html page when any 404 responses happened which is useful if you’re building SPA
Now perform npm i -D webpack-dev-server and update the start script in package.json and perform npm start 🙂. Voila, now you can access your application on your favourite browser at localhost:8080
Conclusion
As you can see webpack and webpack-dev-server setup is pretty straight. If you desire more complex features, webpack-dev-server provide a lot to suit your development need such as https and headers