webpack实现热加载自动刷新的方法


Posted in Javascript onJuly 30, 2017

本文介绍了webpack实现热加载自动刷新的方法,分享给大家,具体如下:

一、webpack-dev-server

一个轻量级的服务

功能:修改代码及时呈现到浏览器上。

第一步:安装

npm install webpack-dev-server -g

webpack实现热加载自动刷新的方法 

第二步:写入到依赖

npm install webpack-dev-server --save-dev

webpack实现热加载自动刷新的方法
第三步:修改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就能立即看到反应在网页上了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 #Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 #Javascript
关于前后端json数据的发送与接收详解
Jul 30 #Javascript
jquery easyui如何实现格式化列
Jul 30 #jQuery
微信小程序对接七牛云存储的方法
Jul 30 #Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 #Javascript
Vue自定义指令详解
Jul 28 #Javascript
You might like
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
PHP钩子实现方法解析
2019/05/21 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
Javascript的匿名函数小结
2009/12/31 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
详解python中的json的基本使用方法
2016/12/21 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
Django models filter筛选条件详解
2020/03/16 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
中专毕业生自我鉴定范文
2013/11/09 职场文书
幼儿园实习自我鉴定
2013/12/15 职场文书
初中家长寄语
2014/04/02 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
2014年环卫工作总结
2014/11/22 职场文书
2015年组织部工作总结
2015/04/03 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
学困生帮扶工作总结
2015/08/13 职场文书