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 each()小议
Mar 18 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
JQuery animate动画应用示例
May 14 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
npm qs模块使用详解
Feb 07 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 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
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
php简单的会话类代码
2011/08/08 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
Jquery异步请求数据实例代码
2011/12/28 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
python 获取url中的参数列表实例
2018/12/18 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
python离线安装外部依赖包的实现
2020/02/13 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
一套比较完整的软件测试人员面试题
2012/05/13 面试题
思想汇报范文
2013/11/04 职场文书
服装设计专业毕业生推荐信
2013/11/09 职场文书
追悼会上的答谢词
2014/01/10 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
理解深度学习之深度学习简介
2021/04/14 Python
怎么用Python识别手势数字
2021/06/07 Python
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技