Webpack Complete Guide: File Listening and hot updates

File to monitor

Isn’t it annoying that we have to manually run the Webpack command every time we make a change to the project? Can’t Webpack help us listen for changes to the file and then automatically compile the package when the file changes?

Webpack says: I can! I can poll to see if the last edit time of a file has changed to determine if I need to recompile (how file listening works).

There are two ways to enable listening mode in Webpack:

• When launching the webpack command, bring--watchParameters.
• In the configurationwebpack.config.jsSet in thewatch:true.

–watch

You can configure listening commands in package.json:

{
  // ...
  "scripts": {
    "watch": "webpack --watch"}}Copy the code

Then run NPM Run Watch and the Webpack enters the listening mode

watch: true

Configure listening mode in webpack.config.js:

module.exports = {
  / /...
  watch: true};Copy the code

watchOptions

Watch Options allows you to customize watch mode options.

watchOptions.aggregateTimeout

When the first file changes, a delay is added before the rebuild. That is, webPack caches any other changes made during that time, and they are finally done in a rebuild. The default value is 200 milliseconds.

// webpack.config.js

module.exports = {
  / /...
  watchOptions: {
    aggregateTimeout: 600,}};Copy the code

watchOptions.ignored

Ignoring large files that don’t need to be listened on, such as node_modules, can optimize performance.

// webpack.config.js

module.exports = {
  / /...
  watchOptions: {
    ignored: /node_modules/,}};Copy the code

watchOptions.poll

Specifies the time interval for polling.

module.exports = {
  / /...
  watchOptions: {
    poll: 1000.// Check for changes every second}};Copy the code

Defects in file listening

Although, with the webpack file listener enabled, you can automatically rebuild the new output file when the source code changes; However, you still need to manually refresh your browser to see the updates.

So, is there a solution to this pain point? A hot update to Webpack is available.

Hot update

Hot updates allow pages to update automatically after a file has been modified without refreshing the browser.

Before we get into the hot update process, it’s important to know a few terms:

• Bundle.js: Build the output file.
• Webapck Compiler: Editor for Webpack that compiles JS source code to bundle.js.
• HMR Server: transfers hot updated files to the HMT Runtime.
• Bundle Server: In the browser, files can be accessed as a Server
• HMR Runtime: It is injected into the bundle.js browser during the packaging phase. It sets up a Web Socket between the bundle.js and the Server, and automatically updates the Code in the bundle.js when the file changes.

⬆️ Then we go through the process in detail. It can be seen from the figure above that the complete process of hot update is divided into two stages:

• Start-up phase:

  • 1. Compile in the file system
  • 2. Package with Webpack Compiler
  • A. Transfer the packaged file to the Bundle Server
  • B. Start the service to enable the browser to access bundle.js as a Server

• File update stage:

  • 1. The contents of the file system are changed
  • 2. Package with Webpack Compiler
  • 3. Transfer the packaged file to the HMR Server to analyze which code has changed
  • 4, HMR Server (Server) sends notifications of changes to HMR Runtime (client)
  • HMR Runtime updates the bundle.js code

webpack-dev-server

Webpack-dev-server gives us a basic Web server with live reloading (hot updating).

Webpack-dev-server does not output files, which means no disk I/O takes place. It keeps bundle files in memory, so it performs better than Watch.

First, install itwebpack.config.js:

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

And then, let’s modify itwebpack.config.js:

• Only needed in the development environmentwebpack.config.js, so modifymode: 'development'
• Tell dev Server to serve1 the files in dist to localhost:8080.

const path = require("path");

module.exports = {
  entry: "./src/index.js".output: {
    filename: "index.js".path: path.resolve(__dirname, "dist"),},module: {
    rules: [{test: /\.js$/,
        use: "babel-loader",
      },
    ],
  },
+  mode: "development",
+  devServer: { static: "./dist" },
  performance: {
    hints: false.maxEntrypointSize: 512000.maxAssetSize: 512000,}};Copy the code

Add a script to run dev server directly, –open to automatically open the page after each build:

// package.json
{
  // ...
  "script": {
    // ...
    "dev": "webpack-dev-server --open"}}Copy the code

Now, at the command line run the NPM run dev, we will see in http://localhost:8080/index) (the default browser automatically loaded page, give it a try!

Webpack series

• preface
• Extremely brief introduction
• The core concept
• Parse the file
• File listening and hot update
• File fingerprint Policy
• Code compression
• CSS enhancement: Autoprefixer
• Multi-page Application Packaging Solution (MPA)