It is going to help us reload all of our assets whenever they change.The original purpose, and it remains the most common use case for Webpack, is front-end javascript bundling. So with the help of the Webpack dev server, whenever we’re working in a development environment, we don’t have to stop and restart again. And once the build ends up bundling, it’s going to reload this for us automatically. So when I hit save, the Webpack dev server will detect the change, and it is going to bundle everything up again. Let’s set the text to “Hello from webpack-dev-server”. We’re going to open index.js, and I will make a small change in our application. Now let’s go back to our code to ensure that this is working as expected. So let’s go back over to the terminal, so I can say npm run serve, you can see that the same Webpack build steps from before are being performed, and this will tell me that the project is running at localhost:3000. Let’s add another script here called “serve”, and this is going to use. So at this point, I will open up our package.json file.

Create an NPM Script to Run the Webpack Dev Server It will tell the dev server to open your default browser after the server had been started. I’m then going to add another property called “open” and set it to true. We will then add a “contentBase”, which will tell the dev server where to serve the content from, and it will be set to path.join(_dirname, 'dist').Īnd then, we want to specify which port the server should run on. Once this is installed, we can go back to our Webpack config, and we’re going to add another node called “devServer”. Configure Webpack 5 to use webpack-dev-server So I will say npm install -save-dev webpack-dev-server. I’m then going to install the Webpack dev server into dev dependencies. To set up the Webpack dev server, I’m going to navigate to my project directory. Create an NPM Script to Run the Webpack Dev Server.Configure Webpack 5 to use webpack-dev-server.

Webpack dev server pug template