这篇文章主要介绍webpack如何实现热加载自动刷新,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:一、WEBpack-dev-server 一个轻量级的服务 功能:修改代码
这篇文章主要介绍webpack如何实现热加载自动刷新,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
具体如下:
一、WEBpack-dev-server
一个轻量级的服务
功能:修改代码及时呈现到浏览器上。
第一步:安装
npm install webpack-dev-server -g
第二步:写入到依赖
npm install webpack-dev-server --save-dev
第三步:修改webpack配置文件
module.exports = {
entry:"./js/index.js",
output:{
path:"/",
//注意这里的改变,必须是根目录,指定目录无效,因为webpack会在内存中根目录下生成下面文件名。
filename:"bundle.js"
},
module:{
loaders:[
{ test:/\.CSS$/,loader:'style-loader'},
{ test:/\.css$/,loader:'css-loader'}
]
},
resolve:{
extensions:['.Vue','.js',".css",'jsx'] //自动补全识别后缀
}
}
说明:如果想指定输出目录你需要自己学习 Content Base 命令的使用。
第四步: 修改index.html
<script type="text/javascript" src="bundle.js"></script>
第五步:运行如下命令 实现自动刷新。
webpack-dev-server --hot --inline
说明:
webpack-dev-server的默认端口号是8080
第六步:
访问Http://localhost:8080/index.html 然后修改css就能立即看到反应在网页上了。
以上是“webpack如何实现热加载自动刷新”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网VUE频道!
--结束END--
本文标题: webpack如何实现热加载自动刷新
本文链接: https://www.lsjlt.com/news/71101.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0