自动编译及自动刷新

09_自动编译及自动刷新

自动编译
如果代码发生变化,我们每次都需要重新输入命令
npx webpack
这样的操作,会很繁琐,不管修改的内容多少,都必须手动,重新编译后才能看到效果
那么,
我们可以使用命令
npx webpack --watch
执行该命令后,编译命令就会时刻监听文件的变化,一旦修改了文件,那么我们的代码就会自动被编译

自动刷新
当我们代码重新被编译后,都需要手动刷新页面,才可以看到最新的结果
那么,我们现在为了节约调试事件,也可以借助工具来实现页面的自动刷新
他就是 webpack-dev-server

webpack-dev-server 为你提供了一个基本的 web server,并且具有 live reloading(实时重新加载) 功能。
首先安装webpack-dev-server,
npm i -D webpack-dev-server

[precode]module.exports = {
mode: 'development',
devServer: {
static: './dist', //设置服务运行的目录
host:'localhost', //设置可访问的域名
port:9000, //设置访问的端口
proxy:{ //代理
'/api':'http://localhost:3000'
}
}
}[/precode]
梓旭梓旭
THE END
分享
二维码
< <上一篇
下一篇>>