How does webpack-dev-server cause browser refresh or module replacement?

I wrote a command line tool based on webpack , using webpack-dev-server . Modifying the file does not cause page reload or module overload, as shown below:

  1. modifying files can cause compiled
  2. refresh to see the modified content
  3. websocket received compiled message

related information:

"webpack": "^3.11.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.11.2",
    "webpack-hot-middleware": "^2.21.0",

devSever is configured as follows

devServer: {
    clientLogLevel: "warning",
    hot: true,
    hotOnly: true,
    contentBase: false,
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath, // /
    proxy: config.dev.proxyTable,
    quiet: true,
    watchOptions: {
      poll: config.dev.poll, // true
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": require("../config/dev.env")
    }),
    new webpack.HotModuleReplacementPlugin(),
    // new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    // new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: dirs.template,
      inject: true
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: dirs.statics,
        to: config.dev.assetsSubDirectory,
        ignore: [".*"]
      }
    ]),
    new FriendlyErrorsPlugin({
      compilationSuccessInfo: {
        messages: [`Your application is running here: http://${config.dev.host}:${config.dev.port}`],
      },
      onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
    })
  ]
Mar.02,2021
Menu