频道导航

• ▸ PHP
• ▸ Java
• ▸ Java SE
• ▸ Python
• ▸ C#
• ▸ C&C++
• ▸ Ruby
• ▸ VB
• ▸ asp.Net
• ▸ Go
• ▸ Perl
• ▸ netty
• ▸ Django
• ▸ Delphi
• ▸ Jsp
• ▸ .NET Core
• ▸ Spring
• ▸ Flask
• ▸ Springboot
• ▸ SpringMVC
• ▸ Lua
• ▸ Laravel
• ▸ Mybatis
• ▸ Asp
• ▸ Groovy
• ▸ ThinkPHP
• ▸ Yii
• ▸ swoole
• ▸ HTML
• ▸ HTML5
• ▸ JavaScript
• ▸ CSS
• ▸ jQuery
• ▸ Bootstrap
• ▸ Angularjs
• ▸ TypeScript
• ▸ Vue
• ▸ Dojo
• ▸ Json
• ▸ Electron
• ▸ Node.js
• ▸ extjs
• ▸ Express
• ▸ XML
• ▸ ES6
• ▸ Ajax
• ▸ Flash
• ▸ Unity
• ▸ React
• ▸ Flex
• ▸ Ant Design
• ▸ Web前端
• ▸ 微信小程序
• ▸ 微信公众号
• ▸ iOS
• ▸ Android
• ▸ Swift
• ▸ Hybrid
• ▸ Cocos2d-x
• ▸ Flutter
• ▸ Xcode
• ▸ Silverlight
• ▸ cocoa
• ▸ Cordova

• 前端之家
• JavaScript
• webpack-dev-server自动更新页面方法

@H_301_0@

代码如下：

@H_301_0@

1.项目结构如下：

@H_301_0@

2.webpack.config.js配置文件

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

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

@H_301_0@

3.package.json配置

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

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

@H_301_0@

4.执行命令

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

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

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

@H_301_0@

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

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

原文链接：https://www.f2er.com/js/33631.html