In-depth analysis of devServer configuration to achieve real-time compilation issues

This article brings you relevant knowledge about javascript, which mainly introduces issues related to devServer configuration to achieve real-time compilation. Webpack-dev-server mainly starts a program using express. Http server, let’s take a look at it, I hope it will be helpful to everyone.

[Related recommendations: javascript video tutorial, web front-end]

Every time you change the code It needs to be repackaged, open the browser, and refresh, which is very troublesome

We can install and use webpackdevserver to improve this experience

webpack-dev-server mainly starts a server using express HTTP server. Its main function is to serve resource files. In addition, this Http server and client use the websocket communication protocol. After the original file is changed, webpack-dev-server will compile it in real time, but the final compiled file is not output to the target folder, which is the original configuration in our output below. : The dist folder is generated after packaging, but the dist directory is not generated using dev-server

output: {
        path: './dist/js',
        filename: 'bundle.js'
    }

After starting the service, you will find that the dist directory is gone. This is because devServer will not generate the packaged module. Place it in the dist directory instead of in memory to improve speed

Installation: npm install webpack-dev-server -D

Modify package.json:

Then you can execute npm run server to start our service

Configure in webpack.config.js:

Cross-domain: During joint debugging, the front-end and back-end are separated, and directly obtaining data will cross domains. After going online, we use nginx to forward. During development, webpack can handle this

Application Scenario: We have used express to create interfaces and data ourselves. When we access these interfaces, cross-domain problems will occur. Previously, we used to set the response header in server.js to allow cross-domain. But now you can also use the devServer proxy.

1. Prepare the node service and create server.js in the project root directory. Take the express creation service as an example:

2.webpack.config, configure devServer in the js file:

## 3. Install axios and introduce it in the entry file index.js , use axios to request interface data

The front browser gets the result:

Hot Module Replacement (HMR: Hot Module Replacement) is a module that comes with webpack and does not require additional installation.

Configure hmr:

1) Configuration file The webpack.config.js header introduces webpack

const webpack = require("webpack");

2) Add in the plug-in configuration:

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

3) Start hmr

The above configuration does not work for js hot update. The page will still be refreshed when saving to achieve the update effect:

We have two b.js and a.js files

b.js In return 1

introduce b.js into a.js, and write the execution result of data b into the page as a number

In the entry file index.js, introduce a and run npm run server (our hot update configuration remains unchanged)

Then we Open the page, change the value of b() 1000 in a.js, and then press ctrl s to save. You will find that the value can only be updated after the page is refreshed. This is obviously not what we want to see. For hot updates of js, we need to listen to the file to be executed in the entry file:

After changing the value in a.js After saving, there is no need to refresh the page, the value will be calculated as the latest value and displayed on the page

Summary: HMR supports CSS hot updates by default, but requires separate monitoring for js.

[Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of In-depth analysis of devServer configuration to achieve real-time compilation issues. For more information, please follow other related articles on the PHP Chinese website!