websocket4.0+typescript 实现热更新

2024年4月8日 264次阅读 来源: 裴东来

最近搞了一个webpack4+typescript的开发环境，折腾了很久现在记录一下。。。。
本身环境比较好搞，但是热更新是个麻烦事儿
本环境是基于webpack-dev-server搭建的

 output: {
    publicPath: '/dist',
    path: path.resolve(__dirname, 'dist'),
    filename: 'ljax.bundle.js',
    hotUpdateChunkFilename: 'hot/hot-update.js',
    hotUpdateMainFilename: 'hot/hot-update.json'
  },

publicPath是必须的字段，不添加HRM就没有效果
在热更新的时候会出现很多hot-update.js和hot-update.json的细碎文件
使用hotUpdateChunkFilename和hotUpdateMainFilename指定他们只生成一个文件，目前没有找到不生成这两个文件的办法，如果哪位大佬知道的话请告知。

plugins: [
    new HtmlWebpackPlugin({
      title: '模块热替换',
      template: './public/index.html'
    }),
    new webpack.HotModuleReplacementPlugin(),
    // 启动输出清理
    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是热更新必不可少的插件

     contentBase: path.resolve(__dirname, 'public'),
    quiet: true,
    compress: true,
    port: PORT,
    host: HOST,
    https: HTTPS,
    hot: true,
    watchContentBase: true,
    open: true,
    overlay: true,
    openPage: './dist/index.html'

hot启动HRM，watchContentBase：监听contentBase下面文件的变化实现live reload，我在这里用它来实现html文件的变化监听
webpack.config.js

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

module.exports = {
  mode: 'development',

  context: __dirname,

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

  output: {
    publicPath: '/dist',
    path: path.resolve(__dirname, 'dist'),
    filename: 'ljax.bundle.js',
    hotUpdateChunkFilename: 'hot/hot-update.js',
    hotUpdateMainFilename: 'hot/hot-update.json'
  },

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

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

  plugins: [
    new HtmlWebpackPlugin({
      title: '模块热替换',
      template: './public/index.html'
    }),
    new webpack.HotModuleReplacementPlugin(),
    // 启动输出清理
    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: path.resolve(__dirname, 'public'),
    quiet: true,
    compress: true,
    port: PORT,
    host: HOST,
    https: HTTPS,
    hot: true,
    watchContentBase: true,
    open: true,
    overlay: true,
    openPage: './dist/index.html'
  }
}

package.json

{
  "name": "ljax",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "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"
  }
}

16日补充：

// 解决module.hot未定义的webpackBUG
///<reference types="webpack-env" />
import Fetch from './fetch'

if (module.hot) {
  module.hot.accept()
}

在入口文件上面加上module.hot这段，这样就实现了HRM了
但是有一个比较坑爹的问题，typescript没有实现hot模块的定义，webpack也没有，这时候只能借助@types/webpack-env来避免报错，当然，你也可以自己写。。。。。

    原文作者：裴东来
    原文地址: https://segmentfault.com/a/1190000020056905
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞