webpack-dev-server自动更新页面方法


Posted in Javascript onFebruary 22, 2018

这两天在看webpack,今天卡在webpack-dev-server上了,折腾了一下午,一直无法正常运行,每次服务器也提示正常启动了,但是浏览器一输入localhose:8080/admin就提示Get/...,反正就是无法打开页面。最后找到一个帖子,发现原来是我启动服务器的代码有问题。

先安装webpack相关组件

cnpm i webpack-dev-server --save-dev
cnpm i webpack --save-dev

代码如下:

1.项目结构如下:

webpack-dev-server自动更新页面方法 

2.webpack.config.js配置文件

因为我定义了两个js,所以入口这边要定义两个名称分别打包成两个bundle.js。。。。。

因为动态生成的文件都是放在dist文件夹的,所以下面publicPath:"/dist/"就是用来监听该文件夹中文件变化的,只要这里面文件内容变化了(其实是手动更新admin和customer文件夹下的index.js,它会自动更新对应的bundle.js),页面也会自动更新。

webpack-dev-server自动更新页面方法

3.package.json配置

这边只要注意一下"server":"webpack-dev-server --inline --content-base"才是启动服务器的正确代码,

我之前是用的下面这三种方式(这种方式应该是之前老版本的,现在2.0以上版本好像不支持了,没有去查阅这方面),

"server":"webpack-dev-server --inline --hot",

"server":"webpack-dev-server --inline",



"server":"webpack-dev-server"

webpack-dev-server自动更新页面方法

4.执行命令

首先输入 “npm start” 生成两个bundle.js

其次输入 “npm run server”或者“webpack-dev-server --inline --content-base”

最后打开浏览器输入localhose:8080/admin或者localhose:8080/customer就可以打开对应的页面

webpack-dev-server自动更新页面方法

5.最后修改对应页面的js代码,页面也会自动同步立即更新

webpack-dev-server自动更新页面方法

以上这篇webpack-dev-server自动更新页面方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery function的正确书写方法
Aug 02 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
webpack实现热加载自动刷新的方法
Jul 30 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
JavaScript缺少insertAfter解决方案
Jul 03 Javascript
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
javascript高仿热血传奇游戏实现代码
Feb 22 #Javascript
实现jquery放大镜的两种方法
Feb 22 #jQuery
JavaScript正则表达式函数总结(常用)
Feb 22 #Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 #Javascript
原生js调用json方法总结
Feb 22 #Javascript
babel的使用及安装配置教程
Feb 22 #Javascript
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 #Javascript
You might like
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
php判断是否为json格式的方法
2014/03/04 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
php 数组元素快速去重
2017/05/05 PHP
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
Python实现发送与接收邮件的方法详解
2018/03/28 Python
详解python之协程gevent模块
2018/06/14 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
python 自动重连wifi windows的方法
2018/12/18 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
介绍一下Linux中的链接
2016/06/05 面试题
外语专业毕业生个人的自荐信
2013/11/19 职场文书
班级标语大全
2014/06/21 职场文书
个人总结与自我评价
2015/02/14 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
mysql分表之后如何平滑上线详解
2021/11/01 MySQL