File to monitor

File monitoring is the automatic reconstruction of a new output file when changes are detected in the source code.

Wepack enables listening mode in two ways:

  • Start the webpack command with the –watch argument
  • Set watch: true in configuring webpack.config.js
"scripts": {
  "build": "webpack"."watch": "webpack --watch"
}
Copy the code

The principle of analysis

Rotate to determine if the last edit time of the file has changed. When a file changes, it will not tell the listener immediately. Instead, it will cache it first and wait for a certain period of time, aggregateTimeout. During this period, if other files have changed, it will eventually build the list of files with these changes. Together generate the results of the build into bunlde files.

module.exports = {
  // By default, false is disabled
  watch: true.// watchOptions only make sense if listening mode is enabled
  watchOptions: {
    // The default is empty. Files or folders that are not listened on and support regular matching
    ignored: /node_modules/.// Wait 300ms for change to occur. Default 300ms
    aggregateTimeout: 300.// Check whether the file has changed by constantly asking the system whether the specified file has changed, the default is 1000 times per second
    poll: 1000}}Copy the code

Although file listening is set up, we still need to manually refresh the browser to see the update. Is there a better way to use WebPack?

Hot update

With Webpack-dev-server, the code is automatically built when changes are made, and the browser content is automatically changed through hot updates after the build is completed. Hot update need webpack – dev server and HotModuleReplacementPlugin combine together.

Another advantage compared with Watch is that there is no DISK IO, and its output files are not stored in disk files, but in memory, so its construction speed will be more advantageous.

use

  1. Start by adding a command to package.json

    "scripts": {
  "build": "webpack"."watch": "webpack --watch"."dev": "webpack-dev-server --open" The open parameter automatically opens the browser after each build
}
Copy the code

  2. Hot update is only used in development mode. Change mode in webpack.config.js to development.

    mode: 'development'
Copy the code

  3. Configure the plug-in

    plugins: [
  new webpack.HotModuleReplacementPlugin()
]
Copy the code

  4. Configuring hot Update

    devServer: {
  contentBase: './dist'.// The base directory of the service
  hot: true // Enable hot update
}
Copy the code

The principle of analysis

First, you need to understand a few concepts. Hot Module Replacement for HMR.

Webpack Compile: Compile the JS source code into bundle.js

HMR Server: outputs hot updated files to the HMR Runtime

Bundle Server: Provides browser access to files as a service

HMR Runtime: will be injected into the browser to update the file changes

Bundle.js: Build the output file

HMR Runtime and HMR Server set up a link, usually a Websocket, to update files in real time.

Two processes of hot update

  • Start-up phase 1-2-A-B

    First of all, after the code is written in the file system, we Compile the source code together with the HMR Runtime into a bundle file and send it to the Bundle Server. The Bundle Server is a Server. This allows you to access the file as a service in the browser.

  • Update stage 1-2-3-4

    When we update files in the file system, Webpack Compile is still compiled. Webpack Compile sends the compiled results to HMR Server, and HMR Server compares which files have changed. Because the HMR Server on the Server establishes a Websocket link with the HMR Runtime on the client, the HMR Server notifies the HMR Runtime file of the changes in json.

Let’s take a closer look at the file update process in a real project:

  1. When a file or module changes, WebPack listens for the change and recompiles the file to produce a unique hash value that identifies the next hot update. Two patch files are generated based on the changes: Description The manifest (file format is hash.hot-update.json, which contains hash and chundId to indicate the changed content) and chunk.js (hash.hot-update.js) modules for the changed content. The current hash value is 1240, and the hash value of the generated file is 6554.

    When we change the contents of the file, we see that the hash value changes to 2381, and the hash value of the generated file is 1240.

  2. Because the Server HMR Server and the client HMR Runtime have established a WebSocket link, the Server pushes a message to the browser when a file changes. Data is the hash value 2381 generated by the previous change, which is the identifier of the next hot update.

  3. Before we receive the socket message, we will have remembered the hash identifier from the previous socket message. At this point, we will create an Ajax request to the server to manifest the changed content. H is the hash value generated by the rebuild of the webpack file, which is also the data value in the message pushed by the socket just now. C is the modified module.

  4. According to the received JSON file, the browser pulls the contents of the module changes.

  5. Trigger the render process to achieve local hot loading