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 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
function, new function, new Function之间的区别
Mar 08 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 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实现图片简单上传
2006/10/09 PHP
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
取得传值的函数
2006/10/27 Javascript
JavaScript 继承详解(二)
2009/07/13 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
Python打印输出数组中全部元素
2018/03/13 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
HTML5未来发展趋势
2016/02/01 HTML / CSS
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
小学校长先进事迹材料
2014/05/13 职场文书
交通安全责任书范本
2014/07/24 职场文书
安全目标管理责任书
2014/07/25 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
关于运动会的广播稿
2014/09/22 职场文书
班级班风口号大全
2015/12/25 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
AJAX学习笔记
2021/05/18 Javascript
python如何读取和存储dict()与.json格式文件
2022/06/25 Python