During development, we want Webpack to be able to detect changes in the source file and immediately update the changed file without having to restart the service. How should that be configured?

Automatically refresh

Automatic refresh means that the devServer of Webpack will trigger a rebuild package when it detects changes in the file, and then automatically refresh the page so that the changes in the source file can be viewed in real time.

Configuration mode

The automatic refresh rule is configured by default in devServer and manual configuration is not required. However, some configuration parameters can still be manually modified.

module.exports = {
  // ...
  devServer: {
      port: 8080.// ...
  },
  watch: true.// Enable listening. Default is false
  watchOptions: {
    ignored: /node_modules/.// Ignore the ones
    // Wait 300ms to execute the action after listening to the change to prevent the file update too fast and recompile too frequently
    // the default is 300ms
    aggregateTimeout: 300.// Determine whether the file has changed by constantly asking the system whether the specified file has changed
    // Query every 1000 milliseconds by default
    poll: 1000}}Copy the code

disadvantages

Automatic refresh will refresh the entire page, the speed is slow, and the status of the program will be lost.

Hot update

Hot update, also known as hot Module replacement or HMR, replaces, adds, or removes modules while the application is running without reloading the entire page.

Configuration mode

  1. The introduction ofHotModuleReplacementPluginThe plug-in
const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');

module.exports = {
  // ...
  plugins: [
     new webpack.DefinePlugin({
         ENV: JSON.stringify('development')}),new HotModuleReplacementPlugin()
  ],
}
Copy the code
  1. Configure the entrance

The entry path string is now an array.

module.exports = {
  // ...
  entry: {
     // index: path.join(srcPath, 'index.js'),
     index: [
         'webpack-dev-server/client? http://localhost:8080/'.// The port is configured as devServer
         'webpack/hot/dev-server',
         path.join(srcPath, 'index.js')],}.}Copy the code
  1. devServerEnabling Hot Update
module.exports = {
  // ...
  devServer: {
     port: 8080.open: true.// Automatically open the browser
     hot: true.// Enable hot update
     // Set the proxy
     proxy: {
         '/api': 'http://localhost:3000',}}}Copy the code
  1. Register hot update ranges

As a final step, register the listening range in your code, specifying the hot update listening range using the module.hot.accept() function. In index.js, listen for the./sum.js file and execute the specified function immediately if there is an update:

import { add } from './sum'

if (module.hot) {
  // listen for./sum file changes
 module.hot.accept(['./sum'].() = > {
     const res = add(10.30)
     console.log('res in hot', res)
  })
}
Copy the code

advantages

Significantly speed up development in the following ways:

  • Preserve application state that is lost during a full page reload
  • Update only the changes to save valuable development time
  • When CSS/JS changes are made in the source code, they are immediately updated in the browser, which is almost equivalent to changing styles directly in the browser DevTools

disadvantages

To register the scope of hot updates in the code, increase the code volume. So unless the code is too large and updates are slow, turning on hot updates can increase development overhead.

Pay attention to

Autorefresh and hot update can only be used in the development environment, that is, they only need to be configured in webpack.dev.js, not in production. The reason is that both automatic refresh and hot update are updated to monitor the change of source files. The production environment is a static file packed with no change of source files. Therefore, automatic refresh and hot update are not required in the production environment