学webpack以来折腾最久的一次bug…
安装webpack-dev-server（在此之前要先完成webpack基本配置，不再赘述）
yarn add webpack-dev-server -D
此时出现警告如下：
原因是chokidar 2和fsevents 1版本过低，node.js版本在14以上时将会报此错，接下来，用npm upgrade升级（先要保证安装了npm upgrade）
npm-check 检查更新:
npm install -g npm-check
npm-upgrade 更新:
npm install -g npm-upgrade
更新全局包:
npm update <name> -g
更新生产环境依赖包:
npm update <name> --save
更新开发环境依赖包：
npm update <name> --save-dev
再次安装webpack-dev-server，警告信息便没了
yarn add webpack-dev-server -D
配置package.json
接下来在webpack.config.js中配置热更新
此时执行yarn dev报错：Cannot find module ‘webpack-cli/bin/config-yargs’
于是参考一位博主的解决方法，卸载了当前4+版本的webpack-cli，然后重装了低版本的webpack-cli
此时便可正常执行yarn dev,并且实现热更新啦~
若修改一下index.js的输出内容，将会无刷新输出如下所示~
感觉热更新跟jq实现jsonp的效果有些相似，都能无刷新加载数据
复习jq实现jsonp
server.js(此处借助express框架)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button{
margin:0;
padding:0;
color: #fff;
height: 35px;
line-height: 35px;
background-color: lightskyblue;
border:1px solid lightskyblue;
border-radius: 5px;
}
p{
width: 200px;
height: 100px;
border:1px solid lightskyblue;
padding:10px;
}
</style>
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button>获取信息</button>
<p></p>
<script>
$('button').click(function(){
$.getJSON('http://localhost:9000/jq-check-username?callback=?',function(data){
console.log(data);
$('p').html(`
id：${
data.id}<br>
name:${
data.name}
`);
})
});
</script>
</body>
</html>
const express=require('express');
const app=express();
app.all('/jq-check-username',(request,response)=>{
var data={
'id':123,
'name':'Hello~'
}
var str=JSON.stringify(data);
var cb=request.query.callback;
response.send(`${
cb}(${
str})`);
app.listen(9000,()=>{
console.log('服务已经开启...');
});
点击按钮
更改server.js
此时无需刷新页面再次点击按钮将会出现如下结果：
就到这里啦！如有理解不当之处，请多指正~