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 相关文章推荐
js 数值项目的格式化函数代码
May 14 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
详解javascript高级定时器
Dec 31 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
Vue函数式组件的应用实例详解
Aug 30 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 Javascript
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的一个登录的类 [推荐]
2007/03/16 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
基于vue实现分页效果
2017/11/06 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
HSRP的含义以及如何工作
2014/09/10 面试题
成龙洗发水广告词
2014/03/14 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
企业金融服务方案
2014/06/03 职场文书
购房意向书
2014/08/30 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
护理专业自荐信范文
2015/03/06 职场文书
怎样写家长意见
2015/06/04 职场文书
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫