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 相关文章推荐
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 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
php下将XML转换为数组
2010/01/01 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
js 字符串操作函数
2009/07/25 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
node.js的事件机制
2017/02/08 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
js如何验证密码强度
2020/03/18 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
Python操作json数据的一个简单例子
2014/04/17 Python
使用Python抓取模板之家的CSS模板
2015/03/16 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
房屋租赁合同协议书范本
2014/10/19 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server