Websocket4.0+typescript How to implement hot updates

I recently started a webpack4+typescript development environment, and I have been trying for a long time to record it now. . . .

The environment is relatively easy to do, but hot updates are a problem

This environment is built on webpack-dev-server

 output: {
  publicPath: '/dist',
  path: (__dirname, 'dist'),
  filename: '',
  hotUpdateChunkFilename: 'hot/',
  hotUpdateMainFilename: 'hot/'
 },

publicPath is a required field, and there is no effect without adding HRM

During hot updates, many and fine files will appear

Use hotUpdateChunkFilename and hotUpdateMainFilename to specify that they only generate one file. At present, no way to not generate these two files is found. If any big shot knows, please let me know.

plugins: [
  new HtmlWebpackPlugin({
   title: 'Module Hot Replacement',
   template: './public/'
  }),
  new (),
  // Start output cleaning  new FriendlyErrorsWebpackPlugin({
   compilationSuccessInfo: {
    messages: [`You application is running here ${HTTPS ? 'https' : 'http'}://${HOST}:${PORT}`],
    // notes: ['Some additional notes to be displayed upon successful compilation'],
    clearConsole: true
   },
  })
 ],

HotModuleReplacementPlugin is an essential plugin for hot updates

 contentBase: __dirname,
  quiet: true,
  compress: true,
  port: PORT,
  host: HOST,
  https: HTTPS,
  // hot: true,
  // hotOnly: true,
  // inline: true,
  open: true,
  overlay: true,
  openPage: './dist/'

The most tricky place is here. I initially added hot and hotOnly fields, but whether it is adding both or using either one alone, HRM has no effect. . . .

Finally, I found that both are not practical. . . . . Mom, I still see this configuration from the official website.

I still don't know much about what's going on. .

Finally, let's post the complete configuration

const path = require('path')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const HOST = 'localhost'
const PORT = 8080
const HTTPS = false

 = {
 mode: 'development',

 context: __dirname,

 entry: {
  app: './src/'
 },

 output: {
  publicPath: '/dist',
  path: (__dirname, 'dist'),
  filename: '',
  hotUpdateChunkFilename: 'hot/',
  hotUpdateMainFilename: 'hot/'
 },

 module: {
  rules: [
   { test: /\.ts/, use: 'ts-loader', exclude: /node_modules/ }
  ]
 },

 resolve: {
  extensions: ['.ts', '.js']
 },

 plugins: [
  new HtmlWebpackPlugin({
   title: 'Module Hot Replacement',
   template: './public/'
  }),
  new (),
  // Start output cleaning  new FriendlyErrorsWebpackPlugin({
   compilationSuccessInfo: {
    messages: [`You application is running here ${HTTPS ? 'https' : 'http'}://${HOST}:${PORT}`],
    // notes: ['Some additional notes to be displayed upon successful compilation'],
    clearConsole: true
   },
  })
 ],

 devServer: {
  contentBase: __dirname,
  quiet: true,
  compress: true,
  port: PORT,
  host: HOST,
  https: HTTPS,
  // hot: true,
  // hotOnly: true,
  // inline: true,
  open: true,
  overlay: true,
  openPage: './dist/'
 }
}

{
 "name": "ljax",
 "version": "1.0.0",
 "description": "",
 "main": "",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "watch": "webpack -w",
  "dev-server": "webpack-dev-server",
  "serve": "start yarn dev-server && yarn watch"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
  "friendly-errors-webpack-plugin": "^1.7.0",
  "html-webpack-plugin": "^3.2.0",
  "ts-loader": "^6.0.4",
  "typescript": "^3.5.3",
  "webpack": "^4.39.1",
  "webpack-dev-server": "^3.7.2"
 },
 "devDependencies": {
  "webpack-cli": "^3.3.6"
 }
}

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.