1. Webpack-dev-server mainly provides two functions:

1. Provide web services for static files: WebPack automatically compiles and updates web content when code changes

2. Automatic refresh and hot replace (HMR) : Update various modules at run time, i.e. partial refresh

Webpack – dev – server installation

npm i -D webpack-dev-server
Copy the code

2. Configure the webpack.config.js file

//resolve is used to join absolute paths
// Can be accessed through __dirname, relative to the configuration file path
//entry: path.resolve(__dirname, './app.js')
const { resolve } = require('path')

// Automatic packaging run
    // Command: NPX webpack-dev-server
    // Package NPM run dev after configuration
    // The command-line program runs NPM run start
    devServer: {
        // The base directory that the server accesses
        contentBase: resolve(__dirname,'dist'),
        compress:true./ / port
        port:8080.// Automatically open the page
        open:true
    },
Copy the code

3. Configure the package.json file

"scripts": {
    // Run in development mode
    "dev": "webpack --mode development".// Run in production mode
    "build": "webpack --mode production"./ / run webpack - dev - server
    "start": "webpack-dev-server --mode development"
  }
Copy the code

4. Run the program

NPM run dev package

Introduce bundles(in my case main.js) in the index. HTML file in the dist folder

Run NPM run start

After the page is opened, you can see the output information in the index.js file on the console. After modifying the output information, you can see that the output information of the console is changed without repackaging it