The previous chapter provided a brief overview of webPack configuration.

In this chapter, WHAT I need to learn is webpack hot update, because during the development process, I don’t want the human to compile the file and refresh the browser when the file changes.

Webpack hot update

Webpack-dev-server automatically refreshes

Webpack-dev-server gives you a simple Web server that can live reloading.

Let’s actually do it.

Let’s create a project

mkdir dev-erver && cdDev-server NPM init -y // Quickly create a project configuration NPM I webpack webpack-dev-server webpack-cli --save-dev mkdir SRC // Create a resource directory mkdir Dist // Output directory touch webpack.dev.js // Since it is in the development environment that requires hot updates, we create the dev configuration file directlyCopy the code

After writing the configuration file, we’ll simply write the multi-entry configuration

'use strict';

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  mode: 'development',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist')}};Copy the code

Then we go to SRC to create the file and write the content

index.js

'use strict'

document.write('hello world~')
Copy the code

With that in mind, we can start webpack-dev-server and add a command to package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+   "dev": "webpack-dev-server --config webpack.dev.js --open"
  },
Copy the code

Run the

npm run dev
Copy the code

dist
WDS

http://localhost:8080
Copy the code

The configuration tells webpack-dev-server to set up the service under localhost:8080 and make the files in the dist directory accessible, so we can just type in the bundle.js address

http://localhost:8080/index.js
Copy the code

dist
html

index.html

<script src="./index.js"></script>
Copy the code

This is when we visit

http://localhost:8080
Copy the code

Now that the content is out, let’s modify the index.js file to see if it can refresh automatically

'use strict'

document.write('hello world~byebye world')
Copy the code

The Web server automatically reloads the compiled code

This is a hot update, but it’s one where you refresh the entire page with every change, and you can go to the console and see it.

Obviously, this still doesn’t meet our needs.

Webpack dev – hot update server collocation HotModuleReplacementPlugin implementation

What we need is to update the modified module without refreshing the page. This is where module hot replacement comes in.

Hot Module Replacement (or HMR) is one of the most useful features webPack provides. It allows various modules to be updated at run time without a complete refresh.

Features:

The HMR-Hot Module Replacement feature replaces, adds, or removes modules while the application is running without reloading the entire page. Significantly speed up development in the following ways:

• Preserve application state that is lost when the page is fully reloaded.
• Update only the changes to save valuable development time.
• Styling is faster – almost as fast as changing styles in the browser debugger.

To enable the

To enable HMR, it is very easy to modify the configuration of Webpack-dev-server and use the built-in HMR plug-in.

'use strict';

    const path = require('path');
+   const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  mode: 'development',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
+   hot: true
  },
  module: {
    rules: [
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader'
        }
      }
    ]
  },
+ plugins: [
+   new webpack.HotModuleReplacementPlugin()
+ ]
};
Copy the code

Let’s modify the file to form a reference relationship

index.js

'use strict'
import { test } from './page1.js'
document.write('hello world~1234')

test(a)Copy the code

page1.js

'use strict'

module.exports = {
  test: function () {
    console.log(11123456)
  }
}
Copy the code

Add another paragraph to the entry page index.js

if (module.hot) {
  module.hot.accept();
}
Copy the code

OK, proceed

npm run dev
Copy the code

Then we modify page1.js and see that the page is not refreshed, only some files are updated

So our hot update is done.

The principle of

We can simplify the process a little bit: Webpack Compile files and send them to the Bundle Server, which is a Server, and then execute those compiled files and make them accessible to the browser. When the file is changed, the Webpack Compile notifies the HMR Server, and the HMR Server notifies the HMR Runtime of the browser.

HMR Runtime is packaged into compiled JS files, and then establishes websocket communication relationship with HMR Server, so that it can be updated and modified in real time.

Link to the article

Webpack Learning path (5) Loader introduction and common loader introduction

Webpack-hot-middleware enables hot updates

Webpack-dev – Middleware

Webpack learning path (1) basic configuration

I am moving forward.