Implementation of webpack-dev-server to build a local server

Preface

When we use webpack to package, we find that every time we update a little code, we need to repackage it, which is very troublesome. We hope to build a server locally, and then write new code to be automatically detected. At this time, we need to use webpack-dev-server

webpack-deb-server

Webpack provides an optional local development server. This local server is built on node.js and uses the express framework internally, which can achieve the browser automatic refresh to display the modified results we want.

Since it is a separate module, we need to install it before using it. The command is as follows:

npm install -D webpack-dev-server 

After the installation is complete, we also need to configure it in webpack. The object of configuration is devServer, which also has many properties. The commonly used properties are as follows:

• contentBase: Which file provides local service? The default is the root file. Here we need to fill in ./dist
• port: port number, the default is 8080
• Inline: The page is refreshed in real time
• historyApiFallBack: In SPA (single page application) pages, rely on HTML5 history mode

The webpack.config.js configuration is as follows:

module.exports = {
   devServer: {
        contentBase: "./dist",
        inline: true,
    },
}

Next, let's add a script command to the package.json file:

"scripts": {
    "dev": "webpack serve"
  },

dev represents the development environment, and the above configuration is complete

webpack-dev-server startup error

Then we start the command npm run dev, and the program reports the following error:

Error: Cannot find module 'webpack-cli/bin/config-yargs'

The reason is the version problem of webpack-cli. Let's first look at our version below

"webpack": "^5.44.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"

Solution 1

Lower the version of webpack-cli from 4 to 3

1. Uninstall webpack-cli

npm uninstall webpack-cli

2. Install webpack-cli@3

npm install webpack-cli@3 -D

Then the startup will not report an error, but this is only a temporary solution. We recommend the second solution

Solution 2

Change the configuration in scripts and change the original webpack-dev-serve to webpack serve

"scripts": {
    "dev": "webpack serve --open --mode development"
},

Finally, we enter npm run dev in the terminal to start normally, and the webpage will be opened automatically because we added the parameter --open. If you want to open it manually, just remove --open.

Solve the port occupation problem

If you have already started a project with vue+webpack, but you execute npm run dev again, the following error will be reported

Error: listen EADDRINUSE: address already in use 127.0.0.1:8080

The reason is that the default port we started last time was 8080. This time you start a project again and the port is still 8080, but port 8080 is already occupied. The solution is that we only need to kill the PID process number corresponding to port 8080.

First find the process ID corresponding to port 8080

lsof -i:8080

After finding the corresponding PID, use the kill command to kill it.

kill -9 PID process number

This is the end of this article about building a local server with webpack-dev-server. For more information about building a local server with webpack-dev-server, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!