websocket4.0+typescript 实现热更新的方法


Posted in Javascript onAugust 14, 2019

最近搞了一个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: __dirname,
  quiet: true,
  compress: true,
  port: PORT,
  host: HOST,
  https: HTTPS,
  // hot: true,
  // hotOnly: true,
  // inline: true,
  open: true,
  overlay: true,
  openPage: './dist/index.html'

最坑的地方来了,我一开始是加上可hot和hotOnly字段的,但是不管是两个都加还是单独使用任何一个,HRM都没有效果。。。。

最后发现两个都不实用就可以。。。。。妈耶,我还是从官网看的这个配置。

到现在也不是很了解是怎么回事。。

最后,贴一下完整的配置吧

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: __dirname,
  quiet: true,
  compress: true,
  port: PORT,
  host: HOST,
  https: HTTPS,
  // hot: true,
  // hotOnly: true,
  // inline: 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"
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 语法集锦 脚本之家基础推荐
Nov 15 Javascript
Javascript 中文字符串处理额外注意事项
Nov 15 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
利用JavaScript的Map提升性能的方法详解
Aug 14 #Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 #Javascript
vue源码nextTick使用及原理解析
Aug 13 #Javascript
封装微信小程序http拦截器过程解析
Aug 13 #Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 #Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 #Javascript
node删除、复制文件或文件夹示例代码
Aug 13 #Javascript
You might like
与数据库连接
2006/10/09 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
利用Python如何批量更新服务器文件
2018/07/29 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
python 实现dict转json并保存文件
2019/12/05 Python
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
学生处主任岗位职责
2013/12/01 职场文书
财务信息服务专业自荐书范文
2014/02/08 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android
Win11 BitLocker 驱动器加密
2022/04/19 数码科技