Hot updates are implemented using Webpack + Nodejs(Express)

The project address

Realize thinking?

Save the code, WebPack listens for the compiled code, completes the compilation, notifies the browser to update the page (throw ideas, fix the problem)

Think about a

The project uses Nodejs(Http) + Express to start a port service as the server

answer


// Project directory Servers/server.js
// Start port
let app = new express();
let server = http.createServer(app);
server.listen(port, hostname, (err) => {})

Copy the code

Think about the second

Webpack listens for file changes and compilations

answer


// Project directory Servers/server.js
// Express uses webpack-dev-middware middleware
let app = new express();
let middleware = webpackDevMiddleware(compiler, {
    logLevel: 'error'.// Logs are printed when compilation errors occur
});
app.use(middleware);

Copy the code
  • Webpack-dev-middware middleware functions

  • Start Webpack Compiler Watch [listen for real-time compilation of entry file changes]

    let compiler = webpack(config);
compiler.watch({}, (err, stats) => {});
Copy the code

  • Middleware for Express

    • Webpack-dev-middleware uses memory-fs to generate memory for files in main.js

    • Get the resource file [webpack=> Output =>filename] main.js when you visit http://localhost:xxxx

  • With the HTML-webpack-plugin plugin

    • /public/index.html template file -> Generate the accessed HTML file
    <body>
    <div id="app"></div>
    <script src="main.js"></script>
</body>
Copy the code

Think of three

Websocket [browser side][server side]

answer

Reference sockjs – client

Reference sockjs – node

Reference webpack – dev – server

  • Browser side (use sockjs-client to create websocket)

    
// Reference directory clients/index.js
// url: http://localhost:xxxx
let clients = new SockJsClient(url);

// events: onopen onclose onmessage

Copy the code

  • Server (use sockjs-node to create socket service)

    
// Reference directory servers.server.js
// createSocketServer
let socketServer = new sockjs();
socketServer.createServer({});
socketServer.installHandlers(app, {
    prefix: '/xxxx'.// This is the address of the socket service you want to create
});

// events: send onconnection onclose

Copy the code

  • How do I communicate and refresh the browser

    The file is compiled using Webpack hooks

    • ⚔ server
    compiler.hooks.done.tap('dev-server'.function() {
    // A set of signals is sent through the server socket server to notify the browser onMessage
})
Copy the code

    • ⚔ browser side

      • Here you need to import the websocket code that the browser needs to create into index.html

      • So here we add clients/index.js and the project entry./ SRC /index.js to the webpack entry

      • Package together into a Webpack Output file

      • Refer to the file webpack.config.js

    • ⚔ Refresh page

      • The SOcekt server sends the signal that the browser has created a Websocket to establish the connection

      • The browser refreshes window.location.reload() using its own window object.

    • ⚔ end

      • Complete a communication

Environment to prepare

Dependency packages required to install

  • webpack
  • html-webpack-plugin
  • sockjs
  • sockjs-client
  • express

Directory structures,

  • Clients client
  • The public HTML templates
  • The servers server
  • SRC page directory
  • Scripts Starts the project script directory

Project start

  • step 1
npm i 

or 

yarn

Copy the code
  • step 2

npm run start

or

yarn start
Copy the code