Open server + to utilize the thermal update capability of the master project

  1. Master of engineering use webpack – dev – server + webpack. HotModuleReplacement hot update ability
  2. In addition, the server provides static services, and write-file-webpack-plugin is required to write files stored in memory locally for the server to use

Utilize master engineering thermal renewal capability

– VUE main project will die due to sub-project hot update

background

Vue is the primary project and REACT is a sub-project. Under certain routing conditions, it will pull the child project rendering from the parent project. The main and sub-projects are started by Weboack-dev-server, using its hot update capability

Cause analysis,

  • Because the sub-project HTML is pulled by the main project through the FETCH request, and then processed into the HTML of the main project. Therefore, in the view of the current service, it is equivalent to only one port 8080 providing service.
  • The main project is local port 8080, and the sub-project is local port 9090. Found a project entry document into the logic of hot update, will lead to send the ws: / / localhost: 8080 / sockjs – node requests rather than under normal circumstances the ws: / / localhost: 9090 / sockjs – node requests. By default, this is based on location.port

  • Because the above request will fail, the main project will hang for some reason
The solution

  • Pictured above, through a custom environment variable WDS_SOCKET_PORT webpack for sub project – dev – sercer services provided by the port number, make the child project normal send ws: / / localhost: 9090 / sockjs – node requests

Unable to hot update

background
  • It is found that thermal update can be realized after the modification of the main engineering, but neither thermal update nor thermal overload can be realized after the modification of the sub-engineering
Cause analysis,
  • As the hot update package of the subproject is stored in port 9090, and the request of the subproject is missing 8080 (as shown in the following figure, it is predicted to be the same as the above situation), the. Hot-update. json file cannot be obtained, resulting in the failure of hot update logic

  • The browser path is localhost:8080/*, and the requested path is /build. Cause the subproject to call port 8080 and it has no corresponding file

The solution

  • As shown above, you can see that the development environment defines webpack_public_path as a subproject port