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

新建目录和页面看图

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. python-----多进程笔记

    多进程笔记: 在Python中多进程的创建方式对比: 1.在Python中,可以通过os.fork()创建子进程,但是这种方式智能在'linux'和'unix'以及'mac'下面使用,不能跨平台,所以 ...

  2. jade反编译，把html编译成jade

    通过上面的学习,了解了一个jade模板怎么编译成一个html页面,现在介绍一个工具,怎么把html页面编译成一个jade模板 命令行 npm install html2jade -g 安装到全局 第一 ...

  3. Redis做消息队列

    1.连接从Redis中获取日志文件并存储到ES中 [root@Logstash ~]# vim /usr/local/logstash/config/redis.conf input {     be ...

  4. CentOS7.x安装Wiki.js知识库

    近期有个需求,搭建一个知识管理系统,所以就找了几个可作为知识管理的软件,最终定位到wiki.js,之所以选择这个,是看中了它的易部署性,该项目是在2016年12月推出了第一个版本,算是比较新的项目了, ...

  5. pandas实现hive的lag和lead函数 以及 first_value和last_value函数

    lag和lead VS shift 该函数的格式如下: 第一个参数为列名, 第二个参数为往上第n行(可选,默认为1), 第三个参数为默认值(当往上第n行为NULL时候,取默认值,如不指定,则为NULL ...

  6. C指针的运算

    指针的运算在数组中才有意义 int *p; p++,一定是在一片连续的区域才有意义,当然越界也会带来诸多问题. void main() { ; int *p = &num;//这根本无界可言 ...

  7. mysql 解决忘记密码 mysql5.7 远程登录不上MySQL（解决腾讯服务器初始mysql密码问题）

    一.修改MySQL启动配置文件 #如果不知道配置文件,先查找find / -name my.cnf#编辑配置文件 vim /etc/my.cnf 在[mysql]  下面第一行加入 skip-gran ...

  8. JQuery-UI组件化开发

    ===================== 页面相关样式及其脚本的引入先后顺序,如下: 1,layout.css 页面的静态基本框架布局样式 2,base.css 页面的静态细节样式 3,ui.css ...

  9. ES 集中式日志分析平台 Elastic Stack（介绍）

    一.ELK 介绍 ELK 构建在开源基础之上,让您能够安全可靠地获取任何来源.任何格式的数据,并且能够实时地对数据进行搜索.分析和可视化. 最近查看 ELK 官方网站,发现新一代的日志采集器 File ...

  10. CKEditor本地图片自动上传插件

    由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直 ...