websocket4.0+typescript 实现热更新的方法
最近搞了一个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:[
newHtmlWebpackPlugin({
title:'模块热替换',
template:'./public/index.html'
}),
newwebpack.HotModuleReplacementPlugin(),
//启动输出清理
newFriendlyErrorsWebpackPlugin({
compilationSuccessInfo:{
messages:[`Youapplicationisrunninghere${HTTPS?'https':'http'}://${HOST}:${PORT}`],
//notes:['Someadditionalnotestobedisplayeduponsuccessfulcompilation'],
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
constpath=require('path')
constFriendlyErrorsWebpackPlugin=require('friendly-errors-webpack-plugin')
constwebpack=require('webpack')
constHtmlWebpackPlugin=require('html-webpack-plugin')
constHOST='localhost'
constPORT=8080
constHTTPS=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:[
newHtmlWebpackPlugin({
title:'模块热替换',
template:'./public/index.html'
}),
newwebpack.HotModuleReplacementPlugin(),
//启动输出清理
newFriendlyErrorsWebpackPlugin({
compilationSuccessInfo:{
messages:[`Youapplicationisrunninghere${HTTPS?'https':'http'}://${HOST}:${PORT}`],
//notes:['Someadditionalnotestobedisplayeduponsuccessfulcompilation'],
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:notestspecified\"&&exit1",
"watch":"webpack-w",
"dev-server":"webpack-dev-server",
"serve":"startyarndev-server&&yarnwatch"
},
"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"
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。