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

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

先安装webpack相关组件

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

代码如下：

1.项目结构如下：

2.webpack.config.js配置文件

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

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

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"

4.执行命令

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

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

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

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

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

您可能感兴趣的文章:

  • webpack实现热加载自动刷新的方法
  • webpack实现热更新（实施同步刷新）
赞 (0)

相关推荐

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

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

    本文介绍了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:

  • webpack实现热更新（实施同步刷新）

    webpack实现热更新（实施同步刷新）

    本文介绍了webpack实现热更新(实施同步刷新),分享给大家,希望对大家有帮助. 解决方案一: 实现热更新,首先,安装一系列的node命令,如果嫌麻烦,你可以直接看解决方案二,相对来说比较简单. 1.webpack命令安装 npm install webpack -g npm init npm init -yes //可以创建默认的package.json npm install webpack --save-dev npm install path fs html-webpack-plugi

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

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

  • 关于Webpack dev server热加载失败的解决方法

    利用Webpack dev server作为热加载服务器时,出现以下错误: XMLHttpRequest cannot load http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not

  • 采用C#实现软件自动更新的方法

    本文实例分析了采用C#实现软件自动更新的方法,是非常实用的功能,值得学习和借鉴.具体如下: 1.问题概述: 长期以来,广大程序员为到底是使用Client/Server,还是使用Browser/Server结构争论不休,在这些争论当中,C/S结构的程序可 维护性差,布置困难,升级不方便,维护成本高就是一个相当重要的因素.有很多企业用户就是因为这个原因而放弃使用C/S.然而当一个应用必须要使用C/S 结构才能很好的实现其功能的时候,我们该如何解决客户端的部署与自动升级问题?部署很简单,只要点击安装程

  • Electron autoUpdater实现Windows安装包自动更新的方法

    前言 Electron帮助我们突破浏览器的界限,通过Electron构建的桌面应用拥有各种浏览器应用梦寐以求的能力. Electron提供的autoUpdater还可以帮助我们实现桌面应用的自动更新. 文件结构 首先,我们已经有了一个基于Electron做的应用,项目中有两个package.json.这样做的一个原因是将devDependencies和dependencies分开了,另外就是不需要在打包的时候再去指定哪些依赖不需要一起打到安装包里面去了(通过ignore参数). 目录结构类似于这

  • SQL Server自动更新统计信息的基本算法

    自动更新统计信息的基本算法是: · 如果表格是在 tempdb 数据库表的基数是小于 6,自动更新到表的每个六个修改. · 如果表的基数是大于 6,但小于或等于 500,更新状态每 500 的修改. · 如果基数大于 500,表为更新统计信息时(500 + 20%的表)发生了更改. · 表变量为基数的更改不会触发自动更新统计信息. 注意:此严格意义上讲,SQL Server 计算基数为表中的行数. 注意:除了基数,该谓语的选择性也会影响 AutoStats 生成.这意味着该统计信息可能无法更新的

  • c# Winform 程序自动更新实现方法

    c# Winform 程序自动更新实现方法

    Winform程序自动更新我也是第一次做,网上找了自动更新的源码,后来又根据在网上看到的一些方法,自己试了很久,最终还是有写错误,所以花了钱让别人帮忙调试成功的,下面是我自己捣腾出来的,方便大家借鉴,如果有什么错误的地方欢迎指正. 1.由于我是通过服务器的IIS发布自动更新的,更新之前先手动把程序复制到IIS服务器的目录下面,做一些更改,客户端才能正常自动更新.所以第一步是不熟IIS服务器(本人系统windows8): 按照上面的方式,选了之后点确定,系统会自动添加这些内容,然后: 网站建立好了

  • 微信小程序版本自动更新的方法

    微信小程序版本自动更新的方法

    公司的小程序项目上线, 后期还会有小型的版本迭代. 为了让用户能在我们进行版本迭代后及时使用最新版本的功能. 做了以下优化.. 知识点1: 当用户点击左上角关闭,或者按了设备Home 键离开微信,小程序并没有直接销毁,而是进入了后台: 当再次进入微信或再次打开小程序,又会从后台进入前台,只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁. 知识点2: 小程序的启动分为"冷启动" 和 "热启动". 热启动是指: 小程序打开后,在一段时间内(目前:5分

  • php自动更新版权信息显示的方法

    本文实例讲述了php自动更新版权信息显示的方法.分享给大家供大家参考.具体分析如下: 我们一般会在页面下方输出版权信息,包含年份信息,每年都要修改,这段简单的代码帮你解决这个问题,自动更新年份 function autoUpdatingCopyright($startYear){ // given start year (e.g. 2004) $startYear = intval($startYear); // current year (e.g. 2007) $year = intval(d

  • 默认浏览器设置及vue自动打开页面的方法

    以下为windows 系统操作,仅供参考. 一.修改默认浏览器 个人偏好谷歌浏览器,设置谷歌浏览器为默认浏览器. 1.首先打开"开始菜单",点击"控制面板": 2.在"控制面板"里面找到"默认程序",进入后点击"设置默认程序": 3.加载好后选择 "谷歌浏览器": 4.选择"将此程序设置为默认值",如果安装360安全卫士,必须先退出360安全卫士,否则设置不起效果.

  • Windows下支持自动更新的Electron应用脚手架的方法

    Windows下支持自动更新的Electron应用脚手架的方法

    前言 之前写过一篇关于 Windows 下通过 Electron 自带的 autoUpdater 实现应用自动更新的文章,很多小伙伴私信问我要具体实现代码,不过因为之前一直很忙(还有懒...). 这两周正好周末比较空,除了在 github 上搭建了一个脚手架,还顺便把实现优化了一波,下面将会带着大家从零开始详细介绍实现过程,对小白也很友好的教程哦. 从零开始 进入你的工作目录,比如 d/workspace # 目录 d/workspace mkdir electron-demo # 新建文件夹

随机推荐