实现自动打包自动刷新浏览器

新建目录和页面看图

cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev

安装后生成这两个文件

加上配置项

配置配置文件

var htmlwp = require('html‐webpack‐plugin');
module.exports={
entry:'./src/main.js', //指定打包的入口文件
output:{
path : __dirname+'/dist', // 注意:__dirname表示webpack.config.js所在目录的绝对路径
filename:'build.js' //输出文件
},
plugins:[
new htmlwp({
title: '首页', //生成的页面标题<head><title>首页</title></head>
filename: 'index.html', //webpack‐dev‐server在内存中生成的文件名称,自动将build注入到这
个页面底部,才能实现自动刷新功能
template: 'vue_02.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)
})
]
}


鼠标右键


运行dev。自动打开页面


查看源代码 ,自动把build.js加进来的

实际上执行的就是npm run dev。我们进入到这个目录里面查看运行命令。

阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_14-webpack研究-webpack-dev-server的更多相关文章

  1. 微服务项目开发学成在线_day02 CMS前端开发

    1 Vue.js与Webpack研究 开发版的浏览器:https://www.google.cn/intl/zh-CN/chrome/dev/ 前端的开发框架:微服务项目开发学成在线_Vue.js与W ...

  2. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_16-页面静态化-模板管理-模板制作

    这是轮播图的原始文件 运行门户需要把 nginx启动起来 单独运行轮播图.把里面的css的引用都加上网址的url 这就是单独访问到的轮播图的效果 轮播图模板的地址: 阶段5 3.微服务项目[学成在线] ...

  3. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_16-CMS前端工程创建-导入系统管理前端工程

    提供了基于脚手架封装好的前端工程 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\阶段5 3.微服务项目[学成在线]·\day02 CMS前端开发\资料\xc-ui-p ...

  4. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_03-用户认证技术方案-Oauth2协议

    2.2 Oauth2认证 2.2.1 Oauth2认证流程 第三方认证技术方案最主要是解决认证协议的通用标准 问题,因为要实现 跨系统认证,各系统之间要遵循一定的 接口协议. OAUTH协议为用户资源 ...

  5. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_01-用户认证需求分析

    1.1 用户认证与授权 截至目前,项目已经完成了在线学习功能,用户通过在线学习页面点播视频进行学习.如何去记录学生的学习过程 呢?要想掌握学生的学习情况就需要知道用户的身份信息,记录哪个用户在什么时间 ...

  6. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_05-Feign远程调用-客户端负载均衡介绍

    2 Feign远程调用 在前后端分离架构中,服务层被拆分成了很多的微服务,服务与服务之间难免发生交互,比如:课程发布需要调用 CMS服务生成课程静态化页面,本节研究微服务远程调用所使用的技术. 下图是 ...

  7. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_02-Eureka注册中心-搭建Eureka单机环境

    我们先搭建单机环境 govern是治理的意思, 这样就把工程创建好了 创建包 创建SpringBoot的启动类. 在父工程里面已经确定了Spring Cloud的版本了.相当于锁定了版本 接下里只需要 ...

  8. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_04-Eureka注册中心-将服务注册到Eureka Server

    cms相当于客户端 配置客户端的信息 后面加逗号分隔开 50102表示向两台eureka服务上报服务,如果有一台死掉了 那么还可以上另外的一台去注册服务 直接把ip注册到eureka 启动类加注解 重 ...

  9. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_01-Eureka注册中心-Eureka介绍

    1 Eureka注册中心 1.1 需求分析 在前后端分离架构中,服务层被拆分成了很多的微服务,微服务的信息如何管理?Spring Cloud中提供服务注册中 心来管理微服务信息. 为什么 要用注册中心 ...

  10. 阶段5 3.微服务项目【学成在线】_day18 用户授权_03-方法授权-jwt令牌包含权限

    修改认证服务的UserDetailServiceImpl类,下边的代码中 permissionList列表中存放了用户的权限, 并且将权限标识按照中间使用逗号分隔的语法组成一个字符串,最终提供给Spr ...

随机推荐

  1. Linux命令——umask、setuid、setgid、sticky bit、chmod、chown

    umask 权限遮罩码,用于控制文件,文件夹的默认权限 文件默认权限:    666-umask 文件夹默认权限: 777-umask 管理员root:                  umask= ...

  2. 【Spring】源码浅析 - ResponseEntity.ok 转载

    https://www.jianshu.com/p/1238bfb29ee1 ResponseEntity.ok具体源码

  3. Springboot项目中的favicon

    当项目还不大的时候,打开浏览器的favicon是自带的小叶子,如下图 此时,我们只需要将我们想要的favicon命令为favicon.ico放置在resource下,重启服务即可改变图标 当项目越来越 ...

  4. usb相关

    https://github.com/daynix/UsbDk/tree/master/UsbDk 更应该关注下libusb

  5. Beyond Compare 4提示已经过了30天试用期

    打开Beyond Compare 4,提示已经超出30天试用期限制,解决方法:1.修改C:\Program Files\Beyond Compare 4\BCUnrar.dll ,这个文件重命名或者直 ...

  6. Spring Bean装配(上)

    Bean:在spring的IOC里面,把配置到IOC容器里面的实体或者是对象都称为Bean Bean配置项 Bean的作用域 Bean的生命周期 Bean的自动装配 Resources&Res ...

  7. activemq的配置与结合spring使用

    其实无论在win下还是在linux下,都可以运行得很爽 下载安装包地址: http://www.apache.org/dyn/closer.cgi?path=/activemq/5.12.1/apac ...

  8. 牛客练习赛51 D题

    链接:https://ac.nowcoder.com/acm/contest/1083/D来源:牛客网 有一个草原可以用一个1~400的数轴表示.有n头羊和q个查询.每头羊的编号分别是1,2,3…n. ...

  9. Luogu P2151 [SDOI2009]HH去散步 矩乘加速DP

    思路:矩乘优化DP 提交:3次(用了一个奇怪的东西导致常数过大) 题解: 如果可以走完正向边后又走反向边那就显然了,但是不能走,所以我们要将正反向边分别编号,区分正反向边. 所以这道题的矩阵是以边的编 ...

  10. ES6-12.Symbol

    Symbol是ES6新增的原始类型数据,引入的初衷是为了对象可以有永不重复的属性名. 所以属性名可以是字符串外,还可以是Symbol值: const a = Symbol("a") ...