脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → webpack-dev-server自动更新页面

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

 更新时间：2018年02月22日 15:47:27   作者：litterWebDesinger  
下面小编就为大家分享一篇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自动更新页面方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法

    Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法

    本文主要介绍了Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法。具有一定的参考价值，下面跟着小编一起来看下吧
    2016-12-12
  • JavaScript禁止右击保存图片,禁止拖拽图片的实现代码

    JavaScript禁止右击保存图片,禁止拖拽图片的实现代码

    这篇文章主要介绍了JavaScript禁止右击保存图片,禁止拖拽图片的实现代码,代码简单易懂，非常不错，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-04-04
  • js 显示base64编码的二进制流网页图片

    js 显示base64编码的二进制流网页图片

    base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，我们把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求
    2014-04-04
  • 纯JS实现五子棋游戏

    纯JS实现五子棋游戏

    这篇文章主要为大家详细介绍了纯JS实现五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05
  • JS co 函数库的含义和用法实例总结

    JS co 函数库的含义和用法实例总结

    这篇文章主要介绍了JS co 函数库的含义和用法,结合实例形式总结分析了JS co 函数库的基本含义、功能、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • js实现弹幕墙效果

    js实现弹幕墙效果

    这篇文章主要为大家详细介绍了js实现弹幕墙效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • JS实现移动端点击按钮复制文本内容

    JS实现移动端点击按钮复制文本内容

    本文通过实例代码给大家介绍了移动端点击按钮复制文本内容 ，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • 原生js实现日期联动

    原生js实现日期联动

    日期联动算是一个比较常见的功能了，随便度娘一下，你就能找到N多代码，今天给大家介绍的是个人比较常用，代码很简洁，高效，这里推挤给大家。
    2015-01-01
  • js获取时间并实现字符串和时间戳之间的转换

    js获取时间并实现字符串和时间戳之间的转换

    这篇文章主要介绍了js获取时间并实现字符串和时间戳之间的转换,需要的朋友可以参考下
    2015-01-01
  • JavaScript CollectGarbage函数案例详解

    JavaScript CollectGarbage函数案例详解

    这篇文章主要介绍了JavaScript CollectGarbage函数案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08

最新评论