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" } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。