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 相关文章推荐
前台js调用后台方法示例
Dec 02 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
老生常谈的跨域处理
Jan 11 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
Vue.js数据绑定之data属性
Jul 07 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
详解Vue.js 响应接口
Jul 04 Javascript
利用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
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
URL中“#” “?” &“”号的作用浅析
2017/02/04 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
python实现决策树
2017/12/21 Python
用django设置session过期时间的方法解析
2019/08/05 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
白色公司:The White Company
2017/10/11 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
舞蹈毕业生的自我评价
2014/03/05 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
董事长助理工作职责
2014/06/08 职场文书
学校志愿者活动总结
2014/06/27 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis